The leaflet label plugin also allows static labels, see the demo. The only reason the polyline label is not static is that it moves around as you move along the polyline. You can probably do better than this, by overriding bindLabel() for Polygons but this is a simple way to add a static label to … Read more
It sounds like you would like to add new functionality (functions, properties, etc) to an existing class. It would make sense to use object-oriented principals for this. For this purpose, I’d recommend you extending the CircleMarker class to add those properties. customCircleMarker = L.CircleMarker.extend({ options: { someCustomProperty: ‘Custom data!’, anotherCustomProperty: ‘More data!’ } }); Now … Read more
Your zoom in/out controls are wrapped with absolutely positioned element with left:0 (due to .leaflet-left class), so float:left wouldn’t help, you could align it to right by overriding left:0 by right:0, or changing .leaflet-left class to .leaflet-right But more correct way would be to use provided api. //disable zoomControl when initializing map (which is topleft … Read more
I finally found the correct code for the Icon.js file : import L from ‘leaflet’; const iconPerson = new L.Icon({ iconUrl: require(‘../img/marker-pin-person.svg’), iconRetinaUrl: require(‘../img/marker-pin-person.svg’), iconAnchor: null, popupAnchor: null, shadowUrl: null, shadowSize: null, shadowAnchor: null, iconSize: new L.Point(60, 75), className: ‘leaflet-div-icon’ }); export { iconPerson };
You should customize the look and feel using css. The following selectors are probably interesting: .leaflet-popup-content-wrapper { } .leaflet-popup-content-wrapper .leaflet-popup-content { } .leaflet-popup-tip-container { } Depending on your browser, you can use tools like Firebug for Firefox or the build in developer tools in Chrome/Safari (right click anywhere on the page and click Inspect element, … Read more
You can do this with Leaflet. (I have done exactly this myself.) You do have to convert your pixel sizes to latlong (latitude/longitude). Leaflet provides you an easy way to do that by using the Simple “Coordinate Reference System”, map.project and map.unproject. First, construct your map like this: var map = L.map(‘map’, { maxZoom: 20, … Read more
You need to set the parent elements to height: 100%; first html, body { height: 100%; } Demo Demo (This won’t work as no parent height is defined) Explanation: Why do you need to do that? So when you specify an element’s height in % then the 1st question that arises is: 100% of what? … Read more
You need to implement the next section of the Quick Start Guide: you’ve initialized the map, but haven’t added any tile layers to it, hence gray. So read on to the section beginning with Next we’ll add a tile layer to add to our map.
Change this : const a = []; By this : const a = Array();
The standard tile server of OSM tries to display labels in the local language whenever such data is available (local meaning the language of the country currently displayed, not your local language). The tiles, served by the tile server, already contain the labels, so you cannot remove them afterwards. But you can: render them on … Read more