Is there there a way to add centerpoints created via .getCenter() within an onEachFeature event (see below) to an L.Marker, or similar, object that contains all of the centerpoints created on that event, that can be used by Leaflet.Markercluster?
I thought using featureGroup might be the solution, but apparently not.
I can get unclustered centerpoints show up on the map via the addTo(map) method on L.Marker or L.FeatureGroup, but, unfortunately, when I try to use markerCluster on the objects either of those two create, the the map comes up empty. No error messages are appearing on the console in the brower.
I'm still pretty green at JS, so I have a hunch there's something fundamental I'm missing, perhaps about L.Markercluster itself, and my apologies for any noob errors here.
Libraries:
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<!-- ESRI Leaflet -->
<script src="https://unpkg.com/esri-leaflet#2.0.4/dist/esri-leaflet.js"></script>
<!-- Leaflet-markercluster -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.0.6/dist/MarkerCluster.css"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.0.6/dist/MarkerCluster.Default.css"></script>
<script src="https://unpkg.com/leaflet.markercluster#1.0.6/dist/leaflet.markercluster.js"></script>
<!-- Leaflet.MarkerCluster.LayerSupport -->
<script src="https://unpkg.com/leaflet.markercluster.layersupport#1.0.5/dist/leaflet.markercluster.layersupport.js"></script>
Script:
<script>
var map = L.map('map', {
center: [42.389810, -72.524684],
zoom: 5
});
var esriTopo = L.esri.basemapLayer('Topographic').addTo(map);
var ProjectMap = L.esri.featureLayer ({
url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Test_Data/FeatureServer/1',
//cheap hack to making the polygons invisible
weight: 0,
fillOpacity: 0,
// creating the centerpoints
onEachFeature: function(feature,layer){
if (feature.geometry.type = 'Polygon') {
var bounds = layer.getBounds();
var center = bounds.getCenter();
var centerpoints = L.marker(center);
centerpointlayer.addLayer(centerpoints);
// centerpointlayer defined below as global variable
};
};
}).addTo(map);
var centerpointlayer = L.featureGroup();
//
var clusters = L.markerClusterGroup.layerSupport();
clusters.addTo(map);
clusters.checkIn(centerpointlayer);
map.zoomIn(5);
map.zoomOut(5);
</script>
</body>
</html>
Gah...Turns out I was implementing L.Markercluster wrong (i.e., not like it says in the API docs). The final lines of code before /script at the end should read:
var centerpointlayer = L.layerGroup();
var clusters = L.markerClusterGroup.layerSupport();
clusters.addLayer(centerpointlayer);
map.addLayer(clusters);
Related
First of all, let's clarify the problem:
I have a map that shows a cluster of points
Marker Cluster Image1
When I start zooming one of the points, everything work as expected to a level of zoom over 5 km Marker Cluster Image2
When the zoom level increases to less than 5 km, the NoisePoint disappears. Marker Cluster Image3
If I keep zooming where the NoisePoint should be, after a certain level, in this case less than 100 meters, the NoisePoint is displayed again. Marker Cluster Image4
How it is built:
I have a function that takes as an argument array of objects containing lat and lng
showTruckPosition(truckDataPositionCordArray) {
var dataPoints = [];
dataPoints = truckDataPositionCordArray.map((item) => {
return new H.clustering.DataPoint(item.lat, item.lng);
});
var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
// min: 1,
// max: 20,
clusteringOptions: {
eps: 32,
minWeight: 2
}
});
let layer = new H.map.layer.ObjectLayer(clusteredDataProvider);
this.map.addLayer(layer);
}
Min and Max options on H.clustering.Provider do not change this strange behavior.
How to stop dies behavior? I need the Noise Points to be visible at max Zoom too.
Please check the below example.
/**
* Display clustered markers on a map
*
* Note that the maps clustering module https://js.api.here.com/v3/3.1/mapsjs-clustering.js
* must be loaded to use the Clustering
* #param {H.Map} map A HERE Map instance within the application
* #param {Object[]} data Raw data that contains airports' coordinates
*/
function startClustering(map, data) {
// First we need to create an array of DataPoint objects,
// for the ClusterProvider
var dataPoints = data.map(function (item) {
return new H.clustering.DataPoint(item.latitude, item.longitude);
});
// Create a clustering provider with custom options for clusterizing the input
var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {
// Maximum radius of the neighbourhood
eps: 32,
// minimum weight of points required to form a cluster
minWeight: 2
}
});
// Create a layer tha will consume objects from our clustering provider
var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
// To make objects from clustering provder visible,
// we need to add our layer to the map
map.addLayer(clusteringLayer);
}
/**
* Boilerplate map initialization code starts below:
*/
// Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
center: new H.geo.Point(30.789, 33.790),
zoom: 2,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Step 5: cluster data about airports's coordinates
// airports variable was injected at the page load
startClustering(map, airports);
#map {
width: 95%;
height: 450px;
background: grey;
}
#panel {
width: 100%;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Marker Clustering</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js"></script>
<script type="text/javascript" src="./data/airports.js"></script>
</head>
<body id="markers-on-the-map">
<div class="page-header">
<h1>Marker Clustering</h1>
<p>Cluster multiple markers together to better visualize the data</p>
</div>
<p>This example displays a map showing the distribution of
airports across the world. The locations were obtained by using
the OpenFlights Airport Database.
Instead of adding a marker for each location, the data has been clustered,
and individual airports are only shown at higher zoom levels.</p>
<div id="map"></div>
<h3>Code</h3>
<p>Marker clustering requires the presence of the <code>mapsjs-clustering</code> module of the API.
The <code>H.clustering.Provider</code> class is used to load in data points and prepare them for clustering.
The result is added to the map as an additional layer using the <code>map.addLayer()</code> method.</p>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>
For more details please refer below exmaple.
https://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/maps-api-for-javascript-examples/tree/master/marker-clustering
This is my first attempt working with javascript and GeoJSON by using leaflet.
So far, I got the desired map and the leaflet.draw plugin working in the way that I can draw a shape and it appears on my screen.
I tried to write this shape to a GeoJSON that I want to use in R.
Therfore I used the ideas presented here to create the GeoJSON string. I think the desired information for me is stored in the variable shape_for_db.
However, using Firebug in Firefox I am not able to find this variable.
Do I get something wrong here?
This is the script I am using:
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<style>
#map{ width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// base map
var map = L.map('map').setView([51.25,10.57], 8);
// load a tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{
attribution: 'Tiles by: OpenStreetMaps',
maxZoom: 17,
minZoom: 5
}).addTo(map);
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
drawnItems.addLayer(layer);
});
// Shape to GeoJSON
map.on('draw:created', function (e) {
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON()
var shape_for_db = JSON.stringify(shape);
});
</script>
</body>
</html>
The scope for your shape_for_db is inside your second listener for draw-created. You can place on window.shape_for_db if you are doing this for a one-off experimental/playing around approach and want to use your dev console/Firebug. Or set up var shape_for_db outside the listener.
I want to use a leaflet map to be a page's background. And this page has a search function, but this search box is not used to search this map. So my question is how to add a search box on a leaflet map?
Do you have any other solution to use a map to be the background?
like this page: http://directory.spatineo.com/
There are many solutions available to adding a search control to a leaflet map. Some are listed on the Leaflet Plugin page under Search and Popups. The search control needs some data to conduct the search, so you should have access to some data on your map. You can host the data on your map or connect to some remote data source(s).
Search Local Level Locations:
If your search criteria is to retrieve data you hosted on the map, then I recommend the Leaflet Search plugin maintained by Stefano Cudini See a working example on this link.
Read more at: https://gis.stackexchange.com/questions/130623/adding-a-search-box-to-a-leaflet-js-example
Search Global Level Locations:
If you want the search criteria to search for random places around the world (that is the database isn't in your app), then use a custom solution provided by a company like ESRI Leaflet project. See working example this codepen page: 'leaflet map with place search'.
<!DOCTYPE html>
<html>
<head>
<title>LeafletJS with Search Box</title>
<!-- CSS and JS files for Search Box -->
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// This setup the leafmap object by linking the map() method to the map id (in <div> html element)
var map = L.map('map', {
center: [51.517327, -0.120005],
zoom: 1.5,
// minZoom: 1.5,
// maxZoom: 1.5
});
// Start adding controls as follow... L.controlName().addTo(map);
// Control 1: This add the OpenStreetMap background tile
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Control 2: This add a scale to the map
L.control.scale().addTo(map);
// Control 3: This add a Search bar
var searchControl = new L.esri.Controls.Geosearch().addTo(map);
var results = new L.LayerGroup().addTo(map);
searchControl.on('results', function(data){
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
});
</script>
</body>
</html>
This solution works with last versions of leaflet and geosearch. First load scripts from unpkg.com (the order is important here).
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.1.0/dist/geosearch.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-geosearch#3.1.0/dist/bundle.min.js"></script>
<script>
jQuery(document).ready(function($) {
var map = L.map('map', {
center: [36.979120, -121.899390],
zoom: 5
}); //Creates a leaflet map centered at center [latitude, longitude] coordinates.
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a', 'b', 'c']
}).addTo(map); //Creates the attribution box at the top bottom right of map.
const provider = new window.GeoSearch.OpenStreetMapProvider();
const search = new GeoSearch.GeoSearchControl({
provider: provider,
style: 'bar',
updateMap: true,
autoClose: true,
}); // Include the search box with usefull params. Autoclose and updateMap in my case. Provider is a compulsory parameter.
L.marker([51.0, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.'); //Creates a marker at [latitude, longitude] coordinates.
});
</script>
<div id="map"></div> // Creates the wrapper cotaining the map
I'm making an ASP.NET site with an OpenLayers map, but in IE it is always loading and in Chrome it says, that the site doesn't react, after a while.
The Script is inside a content tag.And I'm using release 2.13.1.
This is the code:
<script type="text/javascript" src="../Scripts/OpenLayers.js" ></script>
<script type="text/javascript" src="../Scripts/expand.js"></script>
<!-- map built with OpenLayers api on OpenStreetMap -->
<script type="text/javascript">
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326"); // WGS 1984 projection
projectTo = map.getProjectionObject(); // The map projection (Spherical Mercator)
// Define center-point
var lonLat = new OpenLayers.LonLat(8.2891666666666666666666666, 46.8344444444444444444).transform(epsg4326, projectTo);
map.setCenter(lonLat, 8);
</script>
Is my link wrong or did I forget something else?
You're using OpenLayers 2 syntax with the OpenLayers 3 library. One key difference is rather than saying
map = new OpenLayers.Map("mapdiv");
You want to use
var map = new ol.Map("mapdiv");
You'll need to correct the other instances where you use 'OpenLayers' instead of 'ol'.
Here's a link to the getting started with OpenLayers 3 documentation.
Try this will work
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html,body,#mapdiv {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="../js/OpenLayers.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../css/ol-theme-style.css" />
</head>
<body>
<div id="mapdiv"></div>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var lonLat = new OpenLayers.LonLat(73.8567, 18.5203).transform(epsg4326, projectTo);
var zoom = 14;
map.setCenter(lonLat, zoom);
</script>
</body>
</html>
I'm trying to migrate a simple Google Maps project (literally done from an example on their site) over to an AngularJS project. Let me preface this by saying that I'm new to both AngularJS and web dev, so please be kind :) I have a simple project up at https://github.com/eroth/angular-web-app (main files below) where I go from an initial commit using a Google Maps tutorial over to trying to convert it to an AngularJS app, but haven't been able to get it to work, although I've verified that my $scope.init() function in my MapController.js file is being called from my map.html file.
My question is two-fold: is it the case that something's wrong with my code, or do I need something like this (which looks to be very good): http://nlaplante.github.io/angular-google-maps/? I'm working on incorporating this into my project on another branch, but am trying to figure out if it's an issue with my existing code, or if I'd need something like this library to get it to work with AngularJS. If it's the latter, why? Apologizes in advance if it's some exceedingly simple mistake I'm making; as I said I'm pretty new to all this, although I did go through a few AngularJS tutorials and it seems great.
This is my map.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- INCLUDE REQUIRED THIRD PARTY LIBRARY JAVASCRIPT AND CSS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- INCLUDE APPLICATION SPECIFIC CSS AND JAVASCRIPT -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true&language=en">
</script>
<script type="text/javascript" src="js/web-app/app.js"></script>
<script type="text/javascript" src="js/web-app/controllers/mainController.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
<div id="map-canvas"/>
</div>
</body>
</html>
And this is my MapController.js file:
app.controller("mainController", function($scope, $http){
$scope.initialLocation;
$scope.siberia = new google.maps.LatLng(60, 105);
$scope.newyork = new google.maps.LatLng(40.7463, -73.9913);
$scope.browserSupportFlag = new Boolean();
$scope.map;
$scope.retina = window.devicePixelRatio > 1;
$scope.init = function () {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
console.log('In main init');
//first test——map uses hard-coded location, next will get user's location and pull deals
$scope.map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
$scope.browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
$scope.initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var currentLat = position.coords.latitude;
var currentLon = position.coords.longitude;
$scope.map.setCenter($scope.initialLocation);
// performApiCall(currentLat, currentLon);
//definite custom map pin for user location & plot it on map
var pinColor = "5ea9ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|" + pinColor + "|0|_|k",
new google.maps.Size(25, 60),
new google.maps.Point(0,0),
new google.maps.Point(10, 24));
var marker = new google.maps.Marker({
position: $scope.initialLocation,
map: $scope.map,
icon: pinImage,
});
}, function() {
handleNoGeolocation($scope.browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
$scope.browserSupportFlag = false;
handleNoGeolocation($scope.browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
$scope.initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
$scope.initialLocation = siberia;
}
map.setCenter($scope.initialLocation);
}
};
google.maps.event.addDomListener(window, 'load', $scope.init);
});
Thanks in advance for any help!
There are a couple of things wrong with your code. First, you are already calling the init() function of your scope in your mainController via defining it in the DOM with ng-init.
<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
Which means you do not need the listener for window to be loaded to call the $scope.init - because this would run the function twice and in turn initialize your map twice. Remove the listener.
Second, there are a few instances where variables are being called which are actually part of the $scope object (newyork Ln 57, serbia Ln 60 and map Ln 62) - hence will throw a not defined error.
And lastly, you must set a height for the div container of your map in the CSS to actually see the map.
#map-canvas { height : 200px; }
/* if you want to set the height as a percentage of the parent div, remember to give a height to the parent div as well */
As for the second part of your question, I would definitely look into using what's already built. I haven't used the library you linked to, but if you say it's very good - why try to re-invent the wheel?