I want to force marker labels to top using {riseOnHover: true}. I can't seem to implement this with my existing code, which utilizes Omivore to handle csv to marker.
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwc3RlciIsImEiOiI3RmFfME5ZIn0.73sdzUFNqSsGQzjlsnimaA';
var map = L.mapbox.map('map', '1000-days.e2eb0e4z')
.setView([38, -95], 4);
omnivore.csv('./Aprils_World_Map.csv',)
.on('ready', function(layer) {
this.eachLayer(function(marker) {
if (marker.toGeoJSON().properties.country === 'Italy') {
marker.setIcon(L.mapbox.marker.icon({
'marker-symbol': 'star',
'marker-color': '#EF5528',
'marker-size': 'small',
}));
} else {
marker.setIcon(L.mapbox.marker.icon({
'marker-symbol': 'star',
'marker-color': '#EF5528',
'marker-size': 'small'
}));
}
marker.bindLabel(marker.toGeoJSON().properties.city + ', ' +
marker.toGeoJSON().properties.country);
});
})
.addTo(map);
Try setting options like that
this.eachLayer(function(marker) {
L.setOptions(marker, {riseOnHover: true});
});
Related
I am trying to add a custom transform control to geoman, to do certain transformations with polylines and polygons. I see that on edit, geoman draws hint lines above vertices etc. I would like my tool to highlight polylines/polygons with the same type of hints. Below is the skeleton of my action:
const ConvertAction = L.Toolbar2.Action.extend({
options: {
toolbarIcon: {
html:
'<div class="icon-maps icon-convert" title="Convert point"></div>',
tooltip: 'Convert point'
}
},
addHooks: () => {
// draw polygon
// map.pm.enableDraw();
changeConvert();
}
});
function changeConvert() {
convert = true;
map.eachLayer(function (layer) {
if (layer.feature && layer.feature.geometry.type === 'Point') {
layer._icon.style['pointer-events'] = 'auto';
}
});
}
Is there an internal function or something that I could use to outline shapes? When I enable Edit layers tool already built into the geoman, shapes are outlined for me. How could I achieve this from my code without having to reimplement the entire thing?
Thus far, after quickly reviewing geoman code, I was able to come up with:
const ConvertAction = L.Toolbar2.Action.extend({
options: {
toolbarIcon: {
html:
'<div class="icon-maps icon-convert" title="Convert point"></div>',
tooltip: 'Convert point'
}
},
addHooks: () => {
// draw polygon
// map.pm.enableDraw();
if (!convert) changeConvert();
else disableConvert();
}
});
function changeConvert() {
convert = true;
map.eachLayer(function (layer) {
if (
layer?.feature?.geometry.type === 'Polygon' ||
layer?.feature?.geometry.type === 'LineString'
) {
const coords = layer.getLatLngs();
const markerGroup = new L.LayerGroup();
markerGroup._pmTempLayer = true;
const createMarker = (latlng) => {
const marker = new L.Marker(latlng, {
draggable: true,
icon: L.divIcon({ className: 'marker-icon' })
});
layer.options.pane =
(map.pm.globalOptions.panes &&
map.pm.globalOptions.panes.vertexPane) ||
'markerPane';
marker._pmTempLayer = true;
markerGroup.addLayer(marker);
return marker;
};
const handleRing = (coordsArr) => {
// if there is another coords ring, go a level deep and do this again
if (Array.isArray(coordsArr[0])) {
return coordsArr.map(handleRing, this);
}
// the marker array, it includes only the markers of vertexes (no middle markers)
const ringArr = coordsArr.map(createMarker);
return ringArr;
};
const markers = handleRing(coords);
map.addLayer(markerGroup);
}
});
}
function disableConvert() {
convert = false;
map.eachLayer(function (layer) {
if (
layer.dragging &&
layer.options?.draggable === true &&
layer._pmTempLayer === true
) {
console.log('temp layer:', layer);
map.removeLayer(layer);
}
});
update();
}
Seems like an excessive amount of code, and reimplementation [and probably not as good the geoman version as I don't fully understand geoman code by far] of existing functionality.
How do I simplify/fix this?
I have a feature layer pull from geoJson and then syncing a table. I'm trying to make it when I zoom in on eachFeature, it filters the table to those features. Below is my script that is not working. I'm getting the error at 'if (map.getBounds().contains(layer.getBounds()))' Can I get some help?
var featureLayer = L.geoJson(null, {
filter: function(feature, layer) {
return feature.geometry.coordinates[0] !== 0 && feature.geometry.coordinates[1] !== 0;
},
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
title: feature.properties["status_title_github"],
riseOnHover: true,
icon: L.icon({
iconUrl: "assets/pictures/markers/cb0d0c.png",
iconSize: [30, 40],
iconAnchor: [15, 32]
})
});
},
onEachFeature: function (feature, layer) {
if (feature.properties) {
layer.on({
click: function (e) {
identifyFeature(L.stamp(layer));
highlightLayer.clearLayers();
highlightLayer.addData(featureLayer.getLayer(L.stamp(layer)).toGeoJSON());
},
mouseover: function (e) {
if (config.hoverProperty) {
$(".info-control").html(feature.properties[config.hoverProperty]);
$(".info-control").show();
}
},
mouseout: function (e) {
$(".info-control").hide();
}
});
if (feature.properties["marker-color"]) {
layer.setIcon(
L.icon({
iconUrl: "assets/pictures/markers/" + feature.properties["marker-color"].replace("#",'').toLowerCase() + ".png",
iconSize: [30, 40],
iconAnchor: [15, 32]
})
);
legendItems[feature.properties.Status] = feature.properties["marker-color"];
}
}
}
});
function syncTable() {
tableFeatures = [];
featureLayer.eachLayer(function (layer) {
layer.feature.properties.leaflet_stamp = L.stamp(layer);
if (map.hasLayer(featureLayer)) {
if (map.getBounds().contains(layer.getBounds())) {
tableFeatures.push(layer.feature.properties);
}
}
});
$("#table").bootstrapTable("load", JSON.parse(JSON.stringify(tableFeatures)));
var featureCount = $("#table").bootstrapTable("getData").length;
if (featureCount == 1) {
$("#feature-count").html($("#table").bootstrapTable("getData").length + " visible feature");
} else {
$("#feature-count").html($("#table").bootstrapTable("getData").length + " visible features");
}
}
Most probably you are trying to getBounds on a marker.
You understand that point features do not cover any area, therefore there should be no reason to try retrieving their "bounds".
Before testing if your map viewport contains the layer bounds, check whether it is a Marker or not, i.e. a point type feature
layer instanceof L.Marker
Or:
getLatLng in layer
Or since your layers come from GeoJSON data and are built through L.geoJSON factory:
layer.feature.geometry.type === "Point"
Then you can check if that layer is visible in your current map view port in a similar way:
map.getBounds().contains(layer.getLatLng())
BTW for other (i.e. non point type) geometries, I think you would probably prefer checking if their bounds intersects the map view port, rather than is completely contained within.
I'm implementing google map into my ionic app, and I have a script in my index.html, which, will only allow the map works in the index.html.
But I need my map in my templates file route.html instead, so I believe I should move the script in the index.html to the specific controller.js file, but things here are written in $scope style, can anyone tell me how could I wrote the style into $scope style?
And why actually things won't works in the route.html as the same code is used?
<div id="map"></div>
Here's my script in my index.html:
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
And my controller in the controller.js
.controller('RouteCtrl', function($scope, $ionicLoading) {
$scope.mapCreated = function(map) {
$scope.map = map;
};
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function (pos) {
console.log('Got pos', pos);
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function (error) {
alert('Unable to get location: ' + error.message);
});
}
})
There 2 ways to solve your problem :
Change your script to angular method in controller or create a service , like:
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
Change it to jquery in controller, but it not recommend because it will break to purpose of angular usage in ionic:
var map = new google.maps.Map($("#map"), {
zoom: 4,
center: uluru
});
I have a custom sidebar sitting on top of my map. Within the sidebar are checkboxes:
<label><input type="checkbox" name="points" value="addressPoints" /> COUNTY</label>
I would like the map to load with none of the GeoJSON layers pre-loaded and the functionality to toggle a layer on by clicking the checkbox.
Below is the Javascript I am using:
//Create Variable called 'map' and Set Options
var map = L.map('map', {
center: [35.132703, -92.347412], //Faulkner County
zoom: 11,
minZoom: 8,
maxZoom: 18,
keyboard: true,
zoomControl: false,
});
//Add Base Map Tile Layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); //ROADMAP
//L.tileLayer('http://{s}.tiles.mapbox.com/v3/moklick.lh736gg3/{z}/{x}/{y}.png').addTo(map); //SATELLITE
//L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png').addTo(map); //TERRAIN
//L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png').addTo(map); //HEATMAP
//Create Variable for Default Polygon Style
var defaultStyle = {
color: "#3498db",
weight: 2,
opacity: 1,
fillOpacity: 0.4,
fillColor: "#3498db"
};
//Create Variable for Highlighted Polygon Style on Mouseover
var highlightStyle = {
color: "#e74c3c",
weight: 3,
opacity: 1,
fillOpacity: 0.3,
fillColor: "#e74c3c"
};
var onEachFeature = function(feature, layer){
layer.bindPopup("<h4>Voting Precinct:</h4>" + feature.properties.NAME10),
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.NAME10);
};
/*//Add GeoJSON for County Outline
L.geoJson(faulknerCounty, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.popupContent);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.NAME10);
}
}).addTo(map);*/
/*//Add GeoJSON for Voting Precincts
L.geoJson(votingPrecincts, {
style: defaultStyle,
onEachFeature: onEachFeature
}).addTo(map);*/
//Add GeoJSON for JP Districts
L.geoJson(jpDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("<h4>Justice of the Peace District: " + feature.properties.district);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.district);
}
}).addTo(map)
/*//Add GeoJSON for School Districts
L.geoJson(schoolDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("<h4>School District: " + feature.properties.name);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.name);
}
}).addTo(map);*/
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google(),
position: 'topright',
showMarker: false,
retainZoomLevel: false,
}).addTo(map);
Create (but do not .addTo(map)) each geoJSON layer you need...so your init would look likevar schoolDistricts = L.geoJSON(...., then watch for the change event on your checkboxes to add or remove the appropriate layers with map.addLayer(layerToAdd) and map.removeLayer(layerToRemove).
I'm a newbie of javascript, trying to build an interactive map online, where some events should be triggered by clicking on markers and some just by hovering them.
Managed to have the click part working, but, because of Markercluster plugin, I'm not sure where to use onEachFeature function for having the tooltip opened by hover a single marker.
Anyone please can tell me what I'm doing wrong?
var geoJsonFeature = {
type: 'FeatureCollection',
features:
[
{
type: 'Feature',
properties: {
title: 'Title',
page: 'some.html',
'marker-color': '#000000',
zoom: 7
},
geometry: {
type: 'Point',
coordinates: [12.583745,55.6750803]
}
},
...
};
// access to mapbox api
L.mapbox.accessToken ='...';
var map = L.mapbox.map('map', 'example1234').setView([34, -37], 3);
function getTitle(marker) {
return marker.feature.properties.title;
};
function getPage(marker) {
return marker.feature.properties.page;
};
var markerGroup = new L.MarkerClusterGroup({showCoverageOnHover:false});
var geoJsonLayer = L.geoJson(geoJsonFeature, {
onEachFeature: function (feature, layer) {
var popupContent = getTitle(marker);
layer.bindPopup(popupContent);
}
});
markerGroup.addLayer(geoJsonLayer);
map.addLayer(markerGroup);
markerGroup.on('click', function(ev) {
var marker = ev.layer;
marker.on('click', function(ev) {
if(map.getZoom() > marker.feature.properties.zoom) {
map.setView(ev.latlng, map.getZoom());
}
else {
map.setView(ev.latlng, marker.feature.properties.zoom);
}
});
});
});
geoJsonLayer.on('mouseover', function(e) {
e.layer.openPopup();
});
geoJsonLayer.on('mouseout', function(e) {
e.layer.closePopup();
});
You need to use the onEachFeature option to get the individual markers and bind handlers to the mouseover and mouseout events:
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.title);
layer.on("mouseover", function () {
layer.openPopup();
});
layer.on("mouseout", function () {
layer.closePopup();
});
}
Here's a working example on Plunker: http://plnkr.co/edit/hfjOWv3uCBFawDGqR3Ue?p=preview
Note: i'm not using ClusterMarker in this example but it should work just fine when using ClusterMarker