Search Posts

Category: leaflet

Moving the base layer hides the active overlay

I am using angular-leaflet-directive and moving or changing the zoom of the base map hides the active layer. In my example I have one base map and one overlay and if I inspect the page I have this: I have two overlayes instead of one overlay and one basemap and both with que same z-index. My code is: var layer = { baselayers: { xyz: { name: ‘OpenStreetMap’, url: ‘http://{s}{z}/{x}/{y}.png’, type: ‘xyz’ }, topo: { […]

How to use base64 string instead of URL in Leaflet ImageLayer

how to How to use base64 string instead of URL in Leaflet ImageLayer I am using ImegeLayer to print an overlay image over a map using Leaflet. If I use an image that is accessible online, i.e. using Leaflet example: var imageUrl = ‘’, imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; L.imageOverlay(imageUrl, imageBounds).addTo(map); everything works fine. I would however like to use an base64 encoded string as the image. This string is precomputed somewhere else in […]

Leaflet using inline svg as the base layer

Currently, I serve a map with an imageOverlay base layer. Right now, I need to use an svg instead of the current png imageOverlay, and to alter the svg css (like, changing opacity for the nearest places (paths in the svg) etc), dynamically, so basically, I need to control the actual map svg style dynamically. I’ve decided I need to use an inline svg to alter the style of the svg, instead of an image […]

Using $compile on a html string only returns first line

I’m working on a leaflet map that contains markers. I’m using angular.js. I want to bind a popup to each marker which contain information about the marker. If you click on the marker name it should call a function. This is my .js : var boreholePopup = (‘<a ng-click=”boreholeMarkerClicked(‘ + $scope.boreholes[i] + ‘)”>’ + $scope.boreholes[i].boreholeName + “</a><br>Elevation: ” + $scope.boreholes[i].boreholeName + “m<br>Type: ” + $scope.boreholes[i].boreholeName); var compiled = $compile(boreholePopup)($scope); console.log(‘compiled’, compiled); boreholeMarker .bindPopup(compiled[0]) .on(‘mouseover’, function(e) […]