![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
custom-google-map
Advanced tools
A google map api based module that uses a custom theme and markers with info windows.
A series of classes that make customization of a Google Maps API map simple and straightforward.
Create a config.js file in your project that contains a list of "features" objects to be passed to the MapApplication.js file in the package. LoadFeatures and LoadFeatureData will be called from main to populate these objects with data and the loadMarkers function will generate the object markers on the map based on these objects.
Config should contain a const MapInit array that has multiple functions that fetch the json data and copies it to the "cache" Array at a designated index. This array and all of its functions are passed through main to MapApplication. The MapInit should look similar to the following:
const mapinit = [
function() {
cache["data1"] = fetch("WEB API URL HERE").then(resp => {
return resp.json();
});
},
function() {
cache["data2"] = fetch("WEB API URL HERE").then(resp => {
return resp.json();
});
},
];
Each feature object must contain a Data array and a datasource property that takes in a function designed by the user to pass the data from the Cache to the data array on the individual object. This function looks similar to the following:
function populateData()
{
$example= cache["data1"];
$objects = $example.then(examples => {
return examples.map(example => {
let newObject = new Object(example);
return newObject;
});
});
return $objects;
};
A feature object looks similar to the following:
const features = {
object: {
name: "objectName",
label: "objectLabel",
markerLabel: "O",
data: [],
markerStyle:
"/markers/Example-Marker.png",
datasource: populateData,
},
}
import MapApplication from './node_modules/custom-google-map/MapApplication.js';
import Marker from './node_modules/custom-google-map/markers/Marker';
// Instantiate the app and pass in the Config
const myMap = new MapApplication(config);
// Render the map to the page
// mapinit is the array of data functions contained in config.js
let init = myMap.init(mapinit).then(function () {
//console.log("map loaded");
// Set up the features and load in the data
myMap.loadFeatures(features);
myMap.loadFeatureData();
});
export default myMap;
FAQs
A google map api based module that uses a custom theme and markers with info windows.
The npm package custom-google-map receives a total of 3 weekly downloads. As such, custom-google-map popularity was classified as not popular.
We found that custom-google-map demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.