Then I came across Leaflet,<\/p>\n\n\n\n
Leaflet<\/a>\u00a0is an open-source JavaScript library for creating mobile-friendly interactive maps, small and easy-to-use, in general, an amazing alternative to react-google-maps. I would like to show you a simple and easy app using Create React App<\/a>. (For instructions on how to get started, use the Quick Guide<\/a>) and react-leaflet<\/a> in just 3 steps. Leaflet tutorials are also available at egghead.io<\/a>. 2. Now, install esri-leaflet-geocoder to add search functionality in your map:<\/p>\n\n\n\n 3. Create a Map component<\/p>\n\n\n\n Have I missed something? Please feel free to post in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"
The level of control over Leaflet is unmatched, with an ever-growing collection of plugins and constantly updated, developer-driven API.<\/p>\n\n\n\nReasons for selecting Leaflet:<\/h4>\n\n\n\n
Steps for development<\/h4>\n\n\n\n
1. let\u2019s install leaflet and react-leaflet. In the project directory, run:<\/p>\n\n\n\nnpm install leaflet react-leaflet # for npm
yarn add leaflet react-leaflet # for yarn<\/pre>\n\n\n\nnpm install esri-leaflet-geocoder # for npm\nyarn add esri-leaflet-geocoder # for yarn<\/pre>\n\n\n\n
\/** @format *\/\n\nimport { Map, TileLayer, Marker, Popup } from \"react-leaflet\";\nimport React, { useEffect, useState, useRef } from \"react\";\nimport { geosearch } from \"esri-leaflet-geocoder\";\nimport \"leaflet\/dist\/leaflet.css\";\nimport \"esri-leaflet-geocoder\/dist\/esri-leaflet-geocoder.css\";\nimport L from \"leaflet\";\n\nfunction MapView(props) {\n const mapRef = useRef();\n const [position, setPosition] = useState([50, 10]);\n const [icon, setIcon] = useState();\n\n useEffect(() => {\n const { current = {} } = mapRef;\n const { leafletElement: map } = current;\n\n if (!map) return;\n\n const control = geosearch();\n\n control.addTo(map);\n\n control.on(\"results\", handleOnSearchResuts);\n\n let greenIcon = L.icon({\n iconUrl:\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/c9\/Font_Awesome_5_solid_map-marker-alt.svg\",\n shadowUrl:\n \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/c9\/Font_Awesome_5_solid_map-marker-alt.svg\",\n iconSize: [20, 30],\n \/\/ iconAnchor: [22, 94],\n \/\/ popupAnchor: [-3, -76],\n shadowSize: [20, 30],\n \/\/ shadowAnchor: [22, 94],\n });\n setIcon(greenIcon);\n\n return () => {\n control.off(\"results\", handleOnSearchResuts);\n };\n }, []);\n\n \/**\n * handleOnSearchResuts\n * @param {object} data Results object from esri-leaflet-geocoder\n *\/\n\n const handleOnSearchResuts = (data) => {\n console.log(\"Search results\", data);\n setPosition([data.latlng.lat, data.latlng.lng]);\n }\n return (\n <Map\n ref={mapRef}\n center={position}\n zoom={6}\n style={{ width: \"400px\", height: \"400px\" }}\n >\n <TileLayer url=\"http:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png\" \/>\n <Marker position={position} icon={icon}>\n <Popup>Popup for any custom information.<\/Popup>\n <\/Marker>\n <\/Map>\n );\n}\n\nexport default MapView;<\/code><\/pre>\n\n\n\nTadaa\u2026 Our Map is all set to work<\/em><\/h4>\n\n\n\n
![\"Image](\"https:\/\/miro.medium.com\/max\/599\/1*o_pjRPrYET5jcT2t6CvTvA.png\")
<\/figure>\n\n\n\n