We Keep Coding

LeafletJS maps deleting on drag

Using LeafletJS and JavaScript........................................
I'm having an issue with my map. It's getting removed when I drag my marker, is there a way to fix it?
function to drag marker and route
// marker and route dragging enable
marker.dragging.enable();
marker.on("dragend", (e) => {
console.log("Marker has been moved!!!");
var lat = e.target.getLatLng().lat;
var lng = e.target.getLatLng().lng;
var pair = {lat: lat, lng: lng};
markers.set(pair, marker);
routes = [];
const tempMarker = []
markers.forEach((v, index) => {
tempMarker.push(v.getLatLng())
})
console.log({tempMarker});
**for (let i in map._layers) {
if (map._layers[i]._path != undefined) {
map.removeControl(map._layers[i]);
try {
markers.removeLayer(map._layers[i]);
} catch (e) {
console.log(e);
}
}
}**
// loop markers and move polyline
tempMarker.forEach((v, index) => {
// const lt = marker.getLatLng();
console.log('loop', v);
if (tempMarker[index + 1]) {
const nPolyline = L.polyline(
[v, tempMarker[index + 1]], {
enableDraggableLines: true,
color: "black",
weight: 5,
opacity: 0.5,
smoothFactor: 1,
}
).addTo(map);
routes.push(nPolyline);
}
})
console.log({map, routes, markers})
});
// function to drag marker and route ends here
This area area below is where it makes my map remove. how can I fix this issue?
**
for (let i in map._layers) {
if (map._layers[i]._path != undefined) {
map.removeControl(map._layers[i]);
try {
markers.removeLayer(map._layers[i]);
} catch (e) {
console.log(e);
}
}
}
**

Set Map bounds based on multiple marker Lng,Lat

Am using vue and have installed the vue-mapbox component located here: https://soal.github.io/vue-mapbox/#/quickstart
I have updated the js and css to the latest versions also that gets added to the index.html:
<!-- Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css" rel="stylesheet" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>
I am trying to utilize this component to set the default view of the map bounds using either center or bounds or fitBounds to a list of Lng,Lat coordinates. So, basically, how to plug in lng,lat coordinates and have the map default to centering these coordinates inside of the container?
Here's a Component I created, called Map in vue to output the mapbox using the component vue-mapbox listed above:
<template>
<b-row id="map" class="d-flex justify-content-center align-items-center my-2">
<b-col cols="24" id="map-holder" v-bind:class="getMapType">
<mgl-map
id="map-obj"
:accessToken="accessToken"
:mapStyle.sync="mapStyle"
:zoom="zoom"
:center="center"
container="map-holder"
:interactive="interactive"
#load="loadMap"
ref="mapbox" />
</b-col>
</b-row>
</template>
<script>
import { MglMap } from 'vue-mapbox'
export default {
components: {
MglMap
},
data () {
return {
accessToken: 'pk.eyJ1Ijoic29sb2dob3N0IiwiYSI6ImNqb2htbmpwNjA0aG8zcWxjc3IzOGI1ejcifQ.nGL4NwbJYffJpjOiBL-Zpg',
mapStyle: 'mapbox://styles/mapbox/streets-v9', // options: basic-v9, streets-v9, bright-v9, light-v9, dark-v9, satellite-v9
zoom: 9,
map: {}, // Holds the Map...
fitBounds: [[-79, 43], [-73, 45]]
}
},
props: {
interactive: {
default: true
},
resizeMap: {
default: false
},
mapType: {
default: ''
},
center: {
type: Array,
default: function () { return [4.899, 52.372] }
}
},
computed: {
getMapType () {
let classes = 'inner-map'
if (this.mapType !== '') {
classes += ' map-' + this.mapType
}
return classes
}
},
watch: {
resizeMap (val) {
if (val) {
this.$nextTick(() => this.$refs.mapbox.resize())
}
},
fitBounds (val) {
if (this.fitBounds.length) {
this.MoveMapCoords()
}
}
},
methods: {
loadMap () {
if (this.map === null) {
this.map = event.map // store the map object in here...
}
},
MoveMapCoords () {
this.$refs.mapbox.fitBounds(this.fitBounds)
}
}
}
</script>
<style lang="scss" scoped>
#import '../../styles/custom.scss';
#map {
#map-obj {
text-align: justify;
width: 100%;
}
#map-holder {
&.map-modal {
#map-obj {
height: 340px;
}
}
&.map-large {
#map-obj {
height: 500px;
}
}
}
.mapboxgl-map {
border: 2px solid lightgray;
}
}
</style>
So, I'm trying to use fitBounds method here to get the map to initialize centered over 2 Lng,Lat coordinates here: [[-79, 43], [-73, 45]]
How to do this exactly? Ok, I think I might have an error in my code a bit, so I think the fitBounds should look something like this instead:
fitBounds: () => {
return { bounds: [[-79, 43], [-73, 45]] }
}
In any case, having the most difficult time setting the initial location of the mapbox to be centered over 2 or more coordinates. Anyone do this successfully yet?
Ok, so I wound up creating a filter to add space to the bbox like so:
Vue.filter('addSpaceToBBoxBounds', function (value) {
if (value && value.length) {
var boxArea = []
for (var b = 0, len = value.length; b < len; b++) {
boxArea.push(b > 1 ? value[b] + 2 : value[b] - 2)
}
return boxArea
}
return value
})
This looks to be good enough for now. Than just use it like so:
let line = turf.lineString(this.markers)
mapOptions['bounds'] = this.$options.filters.addSpaceToBBoxBounds(turf.bbox(line))
return mapOptions

setting the initial location of the map to be centered over 2 or
more coordinates
You could use Turf.js to calculate the bounding box of all point features and initialize the map with this bbox using the bounds map option:
http://turfjs.org/docs#bbox
https://www.mapbox.com/mapbox-gl-js/api/#map

I created a few simple functions to calculate a bounding box which contains the most southwestern and most northeastern corners of the given [lng, lat] pairs (markers). You can then use Mapbox GL JS map.fitBounds(bounds, options?) function to zoom the map to the set of markers.
Always keep in mind:
lng (lon): longitude (London = 0, Bern = 7.45, New York = -74)
→ the lower, the more western
lat: latitude (Equator = 0, Bern = 46.95, Capetown = -33.9)
→ the lower, the more southern
getSWCoordinates(coordinatesCollection) {
const lowestLng = Math.min(
...coordinatesCollection.map((coordinates) => coordinates[0])
);
const lowestLat = Math.min(
...coordinatesCollection.map((coordinates) => coordinates[1])
);
return [lowestLng, lowestLat];
}
getNECoordinates(coordinatesCollection) {
const highestLng = Math.max(
...coordinatesCollection.map((coordinates) => coordinates[0])
);
const highestLat = Math.max(
...coordinatesCollection.map((coordinates) => coordinates[1])
);
return [highestLng, highestLat];
}
calcBoundsFromCoordinates(coordinatesCollection) {
return [
getSWCoordinates(coordinatesCollection),
getNECoordinates(coordinatesCollection),
];
}
To use the function, you can just call calcBoundsFromCoordinates and enter an array containing all your markers coordinates:
calcBoundsFromCoordinates([
[8.03287, 46.62789],
[7.53077, 46.63439],
[7.57724, 46.63914],
[7.76408, 46.55193],
[7.74324, 46.7384]
])
// returns [[7.53077, 46.55193], [8.03287, 46.7384]]
Overall it might even be easier to use Mapbox' mapboxgl.LngLatBounds() function.
As mentioned in the answer from jscastro in Scale MapBox GL map to fit set of markers you can use it like this:
const bounds = mapMarkers.reduce(function (bounds, coord) {
return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(mapMarkers[0], mapMarkers[0]));
And then just call
map.fitBounds(bounds, {
padding: { top: 75, bottom: 30, left: 90, right: 90 },
});

If you don't want to use yet another library for this task, I came up with a simple way to get the bounding box, here is a simplified vue component.
Also be careful when storing your map object on a vue component, you shouldn't make it reactive as it breaks mapboxgl to do so
import mapboxgl from "mapbox-gl";
export default {
data() {
return {
points: [
{
lat: 43.775433,
lng: -0.434319
},
{
lat: 44.775433,
lng: 0.564319
},
// Etc...
]
}
},
computed: {
boundingBox() {
if (!Array.isArray(this.points) || !this.points.length) {
return undefined;
}
let w, s, e, n;
// Calculate the bounding box with a simple min, max of all latitudes and longitudes
this.points.forEach((point) => {
if (w === undefined) {
n = s = point.lat;
w = e = point.lng;
}
if (point.lat > n) {
n = point.lat;
} else if (point.lat < s) {
s = point.lat;
}
if (point.lng > e) {
e = point.lng;
} else if (point.lng < w) {
w = point.lng;
}
});
return [
[w, s],
[e, n]
]
},
},
watch: {
// Automatically fit to bounding box when it changes
boundingBox(bb) {
if (bb !== undefined) {
const cb = () => {
this.$options.map.fitBounds(bb, {padding: 20});
};
if (!this.$options.map) {
this.$once('map-loaded', cb);
} else {
cb();
}
}
},
// Watch the points to add the markers
points: {
immediate: true, // Run handler on mount (not needed if you fetch the array of points after it's mounted)
handler(points, prevPoints) {
// Remove the previous markers
if (Array.isArray(prevPoints)) {
prevPoints.forEach((point) => {
point.marker.remove();
});
}
//Add the new markers
const cb = () => {
points.forEach((point) => {
// create a HTML element for each feature
const el = document.createElement('div');
el.className = 'marker';
el.addEventListener('click', () => {
// Marker clicked
});
el.addEventListener('mouseenter', () => {
point.hover = true;
});
el.addEventListener('mouseleave', () => {
point.hover = false;
});
// make a marker for each point and add to the map
point.marker = new mapboxgl.Marker(el)
.setLngLat([point.lng, point.lat])
.addTo(this.$options.map);
});
};
if (!this.$options.map) {
this.$once('map-loaded', cb);
} else {
cb();
}
}
}
},
map: null, // This is important to store the map without reactivity
methods: {
mapLoaded(map) {
this.$options.map = map;
this.$emit('map-loaded');
},
},
}
It should work fine as long as your points aren't in the middle of the pacific juggling between 180° and -180° of longitude, if they are, simply adding a check to invert east and west in the return of the bounding box should do the trick

Mapbox + Vue.js - Error: Style is not done loading

I am using Mapbox with Vue.js, and when adding a geojson layer to the map, keep running into this error message:
Uncaught (in promise) Error: Style is not done loading
I have tried many variations to no avail. My question is, how do I ensure the proper order of execution so the layer is always added? I have wrapped the function in a Javascript Promise, with a workaround adding a setTimeout() so the map/style has time to finish loading, even though it is already within a Mapbox listener, but the error creeps its way back every so often. My current component is as follows (have left out certain functions for brevity):
export default {
mounted() {
new Promise(resolve => {
this.loadMap([this.subjectProperty.longitude, this.subjectProperty.latitude])
if(this.mapLoaded === true) resolve()
}).then(() => {
setTimeout(() => {
this.showParcel()
}, 3000)
})
},
methods: {
loadMap(center) {
var self = this
mapBox = new mapboxgl.Map({
container: 'map',
zoom: 12,
pitch: 45,
center: center,
style: 'mapbox://styles/mapbox/streets-v10'
})
mapBox.on('style.load', function() {
self.mapLoaded = true
})
},
showParcel() {
mapBoxBounds = new mapboxgl.LngLatBounds()
this.parcel.geo_json['geometry']['coordinates'][0].forEach((coord) => {
mapBoxBounds.extend(coord)
})
MapBoxObject.addGeoJsonParcels(this.parcel.geo_json)
MapBoxObject.fitBounds()
}
}
}

try code below:
export default {
mounted() {
this.loadMap([
this.subjectProperty.longitude,
this.subjectProperty.latitude
]).then(_=>{
this.showParcel()
})
},
methods: {
loadMap(center) {
return new Promise(resolve=>{
let mapBox = new mapboxgl.Map({
container: 'map',
zoom: 12,
pitch: 45,
center: center,
style: 'mapbox://styles/mapbox/streets-v10'
})
mapBox.on('style.load', _ => {
resolve()
})
})
},
showParcel() {
mapBoxBounds = new mapboxgl.LngLatBounds()
this.parcel.geo_json['geometry']['coordinates'][0].forEach((coord) => {
mapBoxBounds.extend(coord)
})
MapBoxObject.addGeoJsonParcels(this.parcel.geo_json)
MapBoxObject.fitBounds()
}
}
}

Uncaught TypeError: events.forEach is not a function Leaflet and VueJS

I am making a vue project and I want to use leaflet inside of my components. I have the map showing but I run into an error when I try to add a marker to the map. I get
Uncaught TypeError: events.forEach is not a function
at VueComponent.addEvents (VM2537 Map.vue:35)
at e.boundFn (VM2533 vue.esm.js:191)
at HTMLAnchorElement. (leaflet.contextmenu.js:328)
at HTMLAnchorElement.r (leaflet.js:5)
<template>
<div>
<div id="map" class="map" style="height: 781px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: [],
markers: null
};
},
computed: {
events() {
return this.$store.state.events;
}
},
watch: {
events(val) {
this.removeEvents();
this.addEvents(val);
}
},
methods: {
addEvents(events) {
const map = this.map;
const markers = L.markerClusterGroup();
const store = this.$store;
events.forEach(event => {
let marker = L.marker(e.latlng, { draggable: true })
.on("click", el => {
store.commit("locationsMap_center", e.latlng);
})
//.bindPopup(`<b> ${event.id} </b> ${event.name}`)
.addTo(this.map);
markers.addLayer(marker);
});
map.addLayer(markers);
this.markers = markers;
},
removeEvent() {
this.map.removeLayer(this.markers);
this.markers = null;
}
},
mounted() {
const map = L.map("map", {
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [
{
text: "Add Event Here",
callback: this.addEvents
}
]
}).setView([0, 0], 1);
L.tileLayer("/static/map/{z}/{x}/{y}.png", {
maxZoom: 4,
minZoom: 3,
continuousWorld: false,
noWrap: true,
crs: L.CRS.Simple
}).addTo(map);
this.map = map;
}
};
</script>

New2Dis,
Here is your example running in a jsfiddle.
computed: {
events: function () {
return this.store.events;
}
},
watch: {
events: function (val) {
this.removeEvents();
this.addEvents(val);
}
},
methods: {
addEvents(events) {
console.log("hoi")
const map = this.map;
const markers = L.markerClusterGroup();
const store = this.$store;
events.forEach(event => {
let marker = L.marker(event.latlng, { draggable: true })
.on("click", el => {
//store.commit("locationsMap_center", event.latlng);
})
.bindPopup(`<b> ${event.id} </b> ${event.name}`)
.addTo(this.map);
markers.addLayer(marker);
});
map.addLayer(markers);
this.markers = markers;
},
removeEvents() {
if (this.markers != null) {
this.map.removeLayer(this.markers);
this.markers = null;
}
}
},
I did replace some things to make it works, like the $store as I don't have it, and removeEvent was not written correctly, so I'm not sure what I actually fixed...
I have also created a plugin to make it easy to use Leaflet with Vue.
You can find it here
You will also find a plugin for Cluster group here
Give it a try and let me know what you think.

GoogleMaps API with Emberjs

I have a GoogleMap with EmberJs view. Everything works good except the data binding.
I want to bind the map markers with ember-data. If something changes at data level it must reflect on Map.
I tried to use observer, and re-run the makeMarkers method to set the marker, but that seems to be a bad solution.
What would be the best way to bind data with GoogleMaps?

View is deprecated on Ember 2.0, they will be removed at Ember 2.5, make a component like: {{g-map markers=models}}
This component have a collection of items, here markers.
You can implement something like this:
import Ember from 'ember';
import MarkerSync from '../mixin/marker-synchronizer';
/**
* Basic Component to display a google map,
* Service & Marker have to be improved
**/
export default Ember.Component.extend(MarkerSync, {
classNames: 'google-map',
googleMap: Ember.inject.service(),
map: null,
mapOptions: function () {
return {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
},
didInsertElement: function () {
this.$().height('100%');
this.$().width('100%');
this.displayGmap();
jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));
},
willInsertElement: function () {
this.get('googleMap').loadScript();
},
displayGmap: Ember.observer('googleMap.isLoaded', function () {
if (!this.get('googleMap.isLoaded')) {
return;
}
const mapOptions = this.mapOptions();
this.set('map', new google.maps.Map(this.$()[0], mapOptions));
}),
handleResize: function () {
if (!this.get('googleMap.isLoaded')){
return;
}
const map = this.get('map');
const center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
},
});
import Ember from 'ember';
/**
* Synchronize collection with map from component.
* Care about to display or remove marker from map,
* Be careful this is not optimized.
**/
export
default Ember.Mixin.create({
markers: null,
_gHash: Ember.A(),
init() {
this._super.apply(this, arguments);
/*
* observes markers array.
*/
this.get('markers').addArrayObserver({
arrayWillChange: Ember.run.bind(this, this.markersWillChange),
arrayDidChange: Ember.run.bind(this, this.markersDidChange)
});
},
/*
* Remove marker from array and remove from map
*/
markerRemoved(marker) {
let gMarker = this.get('_gHash').find(function(item) {
return item.related === marker;
});
gMarker.native.setMap(null);
this.get('_gHash').removeObject(gMarker);
},
/*
* Add marker to `synchronized` array and display on map
*/
markerAdded(marker) {
const gMarker = new google.maps.Marker({
position: {
lat: marker.lat,
lng: marker.lng
},
title: marker.title,
map: this.get('map'),
});
this.get('_gHash').push({
native: gMarker,
related: marker
});
},
/*
* Take care about removed item
*/
markersWillChange(markers, start, removeCount, addCount) {
if (removeCount > 0) {
for (let i = start; i < start + removeCount; i++) {
this.markerRemoved(markers.objectAt(i));
}
}
},
/*
* Take care about added item
*/
markersDidChange(markers, start, removeCount, addCount) {
if (addCount > 0) {
for (let i = start; i < start + addCount; i++) {
this.markerAdded(markers.objectAt(i));
}
}
},
});
import Ember from 'ember';
const get = Ember.get;
/**
* This service lazy load googleMap api.
* Ugly but do the job
*/
export default Ember.Service.extend({
scriptUrl: 'https://maps.googleapis.com/maps/api/js',
isLoaded: Ember.computed.equal('state', 'loaded'),
state: 'none',
init: function () {
let config = this.container.lookupFactory('config:environment');
var apiKey = get(config, 'googleMap.apiKey');
this.set('apiKey', apiKey);
},
normalizeUrl: function () {
var url = this.get('scriptUrl');
url += '?' + 'v=3' + '&' + 'libraries=places' + '&' + 'callback=loadGmap';
if (this.get('apiKey')) {
url += '&key=' + this.get('apiKey');
}
return url;
},
loadScript: function () {
if (this.get('state') !== 'none'){
return false;
}
this.set('state', 'loading');
window.loadGmap = Ember.run.bind(this, function () {
this.set('state', 'loaded');
});
var url = this.normalizeUrl();
return Ember.$.getScript(url).fail(function(){
console.log('getScript fail');
});
},
});
This implementation work but you have to 'sanitize' this code :)

1) Create a component, not a view
2) Use didInsertElement to render google map and observer to update it. Don't forget that observers are synchronous (http://guides.emberjs.com/v1.13.0/object-model/observers/) and you need to do smth like:
somethingChanged: Ember.observer('something', function () {
Ember.run.once(this, '_somethingChanged');
}).on('init'),
_somethingChanged: function () {
/* do smth about changed property here */
}