How can I get a point feature over a polygon feature? I am layering polygon on top of the point feature or a marker feature however I also have a tooltip (popup) that fires when hovering over the features but only the polygon popup is getting displayed even when I am hovering over the point/marker feature. I am assured the point/marker is over/on top of the polygon because I assigned a 1.0 opacity and point/marker is still visible.
So when a point is on top of a polygon how can I get the popup on the point/marker feature to fire? Or is this a potential defect?
I swapped out the hover event for a 'click' event on the point/marker feature and the popup works as expected but this is not the desired behavior.
TIA!
Rick...
I've done a bunch of experimenting and its the order in which the events are added that make all the difference, not the order of the layers in this case. Unless you add the events to the map, rather than the individual layers, then the rendering order is used.
I've put together a little test app to test all the different scenarios:
var map, datasource, output, polygonLayer, pointLayer, isSwapped = false;
function GetMap() {
output = document.getElementById('output');
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.1255, 47.6305],
zoom: 17,
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: subscriptionKey
}
});
//Wait until the map resources are ready.
map.events.add('ready', function() {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add polygon to data source.
datasource.add(new atlas.data.Polygon(
[
[
[-122.126, 47.63096],
[-122.12602, 47.62997],
[-122.12537, 47.62994],
[-122.12534, 47.63094],
[-122.12600, 47.63096]
]
]
));
//Add point data
datasource.add(new atlas.data.Point([-122.1255, 47.6305]));
polygonLayer = new atlas.layer.PolygonLayer(datasource, null, {
fillColor: 'red'
});
pointLayer = new atlas.layer.SymbolLayer(datasource, null, {
filter: ['==', ['geometry-type'], 'Point']
});
map.layers.add([polygonLayer, pointLayer]);
map.events.add('mousemove', layerHovered);
});
}
function layerHovered(e) {
var msg = [];
if (e.shapes && e.shapes.length > 0) {
msg.push(e.shapes.length, ' shapes hovered.<ul>');
e.shapes.forEach(s => {
if (s instanceof atlas.Shape) {
msg.push('<li>Shape: ', s.getType(), '</li>');
} else {
msg.push('<li>Feature: ', s.geometry.type, ' (', s.source, ' -> ', s.sourceLayer, ')</li>');
}
});
msg.push('</ul>');
}
output.innerHTML = msg.join('');
}
function swapLayerOrder() {
map.layers.remove([pointLayer, polygonLayer]);
if (isSwapped) {
map.layers.add([polygonLayer, pointLayer]);
} else {
map.layers.add([pointLayer, polygonLayer]);
}
isSwapped = !isSwapped;
}
function changeEvents(elm) {
map.events.remove('mousemove', layerHovered);
map.events.remove('mousemove', pointLayer, layerHovered);
map.events.remove('mousemove', polygonLayer, layerHovered);
switch (elm.value) {
case 'map':
map.events.add('mousemove', layerHovered);
break;
case 'ps':
map.events.add('mousemove', [polygonLayer, pointLayer], layerHovered);
break;
case 'sp':
map.events.add('mousemove', [pointLayer, polygonLayer], layerHovered);
break;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;height:600px;"></div>
<div style="position:absolute;top: 10px;left:10px;background-color:white;padding:10px;">
<input type="button" onclick="swapLayerOrder()" value="Swap layer order"/>
<br/><br/>
Attach event to:<br/>
<input type="radio" name="gender" value="map" checked="checked" onclick="changeEvents(this)"/> map<br/>
<input type="radio" name="gender" value="ps" onclick="changeEvents(this)"/> polygon layer then symbol layer<br/>
<input type="radio" name="gender" value="sp" onclick="changeEvents(this)"/> symbol layer then polygon layer<br/>
<br/>
<div id="output"></div>
</div>
<script>var subscriptionKey = atob('dFRrMUpWRWFlTnZEa3h4bnhIbTljWWFDdnFsT3ExdS1mWFR2eVhuMlhrQQ==')</script>
</body>
</html>
Related
Iam trying to use HERE MAPS API, and i want to get markers from mySQL database, i am using the api like showing in here forume but markers doesnt shown im the map, i ma using this code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1542186754" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-clustering.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/**
* Display clustered markers on a map
*
* Note that the maps clustering module http://js.api.here.com/v3/3.0/mapsjs-clustering.js
* must be loaded to use the Clustering
* #param {H.Map} map A HERE Map instance within the application
* #param {Array.<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
var platform = new H.service.Platform({
app_id: 'devportal-demo-20180625',
app_code: '9v2BkviRwi9Ot26kp2IysQ',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {
center: new H.geo.Point(30.789, 33.790),
zoom: 2,
pixelRatio: pixelRatio
});
// 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: request a data about airports's coordinates
var url= 'https://jsondataexemple.com/hereapi/jsondata.json';
$.ajax({
type: 'GET',
dataType: 'json',
url: url,
success: function (data) {
startClustering(map, data);
}
});
</script>
</body>
</html>
the Json file is generated from my database by a php script :
[{"id":2812,"latitude":"33.5706476858027","longitude":"-7.600212045766735"},{"id":2811,"latitude":"33.56960668831451","longitude":"-7.6025319565980904"}]
thanks for helping me
In your json, latitude, longitude seems to be String. they should Float.
you may consider using ParseFloat in JS or change your php script.
after testing chrome debuger i found that the probleme is from my local host, but the code work properly in my online host !.
sorry
I am a novice at fusion tables and google maps APIs, so hopefully the answer is straight forward! I have used fusion tables to create a map of data points and added a search function.
However, the map only appears briefly before disappearing to be replaced by a "Sorry, something went wrong message". I have reviewed the code and can't work out where the error is.
Please could someone take a look and advise what needs to change?.
Here is the link to the page: https://www.enablie.co.uk/map-test/
My code is:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:800px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.90081096506728, -0.8806991343750425),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE"
},
map: map,
styleId: 2,
templateId: 2
});
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'School Name' CONTAINS IGNORING CASE '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col2",
from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label class="layer-wizard-search-label">
School Name
<input type="text" id="search-string_0">
<input type="button" onclick="changeMap_0()" value="Search">
</label>
</div>
</body>
</html>
Where is your map init with AppId & AppSecret keys ? You must call Google App using this on init of your page (see this Google Map Api JS)
https://developers.google.com/maps/documentation/javascript/examples/map-simple
I am a novice with Google maps API. So far, I have managed to get my markers in layers. But as I select multiple layers to show, some of my markers hide. Even if I zoom all the way, I am unable to view them. When I unchecked one of the other layers, the markers come back. Is there some code that I can add to fix this?
This is what I have so far hosted on Kissr sites: Version 1 - Maps
This is my most recent code on github: Github Code
This is my html file.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDYLjSN23UIORWpyQ-09Qd6dz7M2KNydQk&sensor=false"></script>
<script type="text/javascript" src="vars.js" ></script>
<script>
function initialize() {
var MaristCollege = {
center : schoolCenter,
zoom : 16,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), MaristCollege);
check();
}
function check() {
if (document.getElementById('lan-rooms').checked) {
lanRooms.setMap(map);
} else {
lanRooms.setMap(null);
}
if (document.getElementById('man-holes').checked) {
manHoles.setMap(map);
} else {
manHoles.setMap(null);
}
if (document.getElementById('conduits-trail').checked){
conduitPathMcD.setMap(map);
conduitPathMrG.setMap(map);
} else {
conduitPathMcD.setMap(null);
conduitPathMrG.setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
Layer Selection
<label>
<input type="checkbox" name="checkbox" id="lan-rooms" onclick="check()" value="value">
Lan Rooms </label>
<label>
<input type="checkbox" name="checkbox" id="man-holes" onclick="check()" value="value">
Man Holes </label>
<label>
<input type="checkbox" name="checkbox" id="conduits-trail" onclick="check()" value="value">
Conduit Paths</label>
<div id="googleMap" style="width:100%;height:850px;"></div>
</body>
</html>
This is the code from my JS file that puts in the Fusiontables.
//school coordinate
var schoolCenter = new google.maps.LatLng(41.722937, -73.936533);
var map;
//lan room locations found in a fusion table
var lanRooms = new google.maps.FusionTablesLayer({
query : {
select : 'Location',
from : '1Mn-40rJ6-r7gjFfnVCqy3AS6Xc9flaiowjQTFbk'
},
styles : [{
markerOptions : {
iconName : 'small_green'
}
}]
});
//manhole location created in a fusion table
var manHoles = new google.maps.FusionTablesLayer({
query : {
select : 'Location',
from : '1EOtteMYME1OzNuF2pHT7KZqo1qKLWCWQian0RzM'
},
});
I implemented the map on web page using JavaScript API, and now I want to show the basic information about some location. In JavaScript API documentation, I found a part of which is called "Basic place display" in Places Components section, but there is an example of how to render information using placeId.
I need to be able to retrieve information using location coordinates if it is possible. I tried to display information using PHP code that define coordinates for some location on the map instead of using placeId, but it's not working.
This is an example of code that I used:
var basicPlace = new nokia.places.widgets.Place({
placeId: PHP code instead of placeId.
*exp: [<?php code;?>, <?php echo code;?>],*
targetNode: "map",
template: "nokia.blue.place"
});
Is it possible to solve the problem like that, or there is a method that does not involve placeId.
Links: Here Developer, Here JavaScript API
If you read the nokia.places.widgets.Place documentation, you will see that placeId is a mandatory parameter. It is in effect the primary key for the place information that is held by HERE. You will therefore need to make another request using the JavaScript API prior to display in order to obtain the placeId so you can show your place details. The obvious thing to do here is to make a category request first, and store the placeId with each marker as shown below:
// Function for receiving search results from places search and process them
var processResults = function (data, requestStatus, requestId) {
var i, len, locations, marker;
if (requestStatus == "OK") {
locations = data.results ? data.results.items : [data.location];
if (locations.length > 0) {
for (i = 0, len = locations.length; i < len; i++) {
// Add a marker and store the placeId
marker = new nokia.maps.map.StandardMarker(locations[i].position,
{ text: i+1 ,
placeId : locations[i].placeId});
resultSet.objects.add(marker);
}
}
});
// etc.. etc...
The second part is to add the click listener which displays an infobubble and populates the Place Widget using the stored placeId:
resultSet.addListener("click" , function(evt) {
infoBubbles.openBubble("<div id='basicPlaceContainer'></div>",
evt.target.coordinate);
var basicPlace = new nokia.places.widgets.Place({
placeId: evt.target.placeId,
targetNode: "basicPlaceContainer",
template: "nokia.blue.bubble"
});
}, false);
The complete working example can be seen below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Nokia Maps API for JavaScript Example: Search by category</title>
<meta name="description" content="Search by category"/>
<script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
</head>
<body>
<div id="mapContainer" style="width:540px; height:334px;"></div>
<script type="text/javascript" id="exampleJsSource">
/* Setup authentication app_id and app_code
*/
nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR APP CODE");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode", "cit");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// Initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
new nokia.maps.map.component.Behavior()
]
});
this.infoBubbles = new nokia.maps.map.component.InfoBubbles();
map.components.add(infoBubbles);
var searchCenter = new nokia.maps.geo.Coordinate(52.51, 13.4),
searchManager = nokia.places.search.manager,
resultSet;
// Function for receiving search results from places search and process them
var processResults = function (data, requestStatus, requestId) {
var i, len, locations, marker;
if (requestStatus == "OK") {
locations = data.results ? data.results.items : [data.location];
if (locations.length > 0) {
if (resultSet) map.objects.remove(resultSet);
resultSet = new nokia.maps.map.Container();
resultSet.addListener("click" , function(evt) {
infoBubbles.openBubble("<div id='basicPlaceContainer'></div>", evt.target.coordinate);
var basicPlace = new nokia.places.widgets.Place({
placeId: evt.target.placeId,
targetNode: "basicPlaceContainer",
template: "nokia.blue.bubble"
});
}, false);
for (i = 0, len = locations.length; i < len; i++) {
marker = new nokia.maps.map.StandardMarker(locations[i].position,
{ text: i+1 ,
placeId : locations[i].placeId});
resultSet.objects.add(marker);
}
map.objects.add(resultSet);
map.zoomTo(resultSet.getBoundingBox(), false);
} else {
alert("Your search produced no results!");
}
} else {
alert("The search request failed");
}
};
// Make a place search request
var category = "eat-drink";
map.addListener("displayready", function () {
searchManager.findPlacesByCategory({
category: category,
onComplete: processResults,
searchCenter: searchCenter
});
});
</script>
</body>
</html>
The result can be see below:
I'm using Leaflet to draw a map, within the popups I've added a link that should lead to a more detailed description, the description is separated from map and arranged into list using an accordion, so every description is hidden.
I can use an anchor to link to the accordion content, but I need to execute some JavaScript onclick so I am trying to add a click event handler - its not working.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>-->
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<div id="log"></div>
<div id="map_box_text" class="status_half">
<br>
<br>
<p>List made using JQuery UI accordion, every element is hidden, only on hover it opens, you can click on it to display on map, reverse cliking on map should aopen accordion list description (this), it's currently done using permalinks because I cannot catch click event on a or span tag.
<div class="accordion">
<h4> Ioff :: **** ***</h4>
<div>Detailed data</div>
<br>
<br>
<h4>Us sb :: **** *** </h4>
<div>Detailed data</div>
<br>
<br>
<h4>Ioff :: **** ***</h4>
<div>Detailed data</div>
<br>
<br>
<h4>Us sb :: **** *** </h4>
<div>Detailed data</div>
</div>
</div>
<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var map = new L.Map('map', {
center: new L.LatLng(51.641485,-0.15362),
zoom: 13
});
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/a0ead8ee56bd415896e0c7f7d22e8b6e/997/256/{z}/{x}/{y}.png',
cloudmadeAttrib = 'Map data © 2011 OpenStreetMap contributors',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
map.addLayer(cloudmade);
var point = {};
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("Ioff <br>**** ***");
point["point_222_22"] = new L.Marker(new L.LatLng(51.6616333333333,-0.0528583333333333)).bindPopup("Us sb <br>**** ***");
point["point_333_33"] = new L.Marker(new L.LatLng(52.3910783333333,-0.696951666666667)).bindPopup("Ioff <br>**** ***");
point["point_555_44"] = new L.Marker(new L.LatLng(51.641485,-0.15362)).bindPopup("Us sb <br>**** ***");
var points_layer = new L.LayerGroup();
points_layer.addLayer(point["point_111_11"]);
points_layer.addLayer(point["point_222_22"]);
points_layer.addLayer(point["point_333_33"]);
points_layer.addLayer(point["point_555_44"]);
map.addLayer(points_layer);
$('.pointpopup').click(function(){
var pointname = this.id;
map.setView(point[pointname].getLatLng(),15);
point[pointname].openPopup();
});
});
$(window).load(function(){
$("body").click(function(event) {
//console.log('event target is:' + event.target.nodeName);
$("#log").html("clicked: " + event.target.nodeName);
});
$('.map_popup').live('click',function () {
//$('.map_popup').click(function(){
alert('Try to open Accordion ' + $(this).attr('href'))
//console.log('Try to open Accordion');
})
})
</script>
</body>
</html>
you can check it on JS Fiddle
I've reported this as a bug on github to developer of Leaflet here and here but he close bug replying that it's not a issue and I can use another class - which doesn't work.
Edit:
I've found some on my own too: http://jsfiddle.net/M5Ntr/12/
But there is still a problem, potentially there can be a 500 points, so I would like to have as less code as possible, I've tried to create function but I cannot pass variables :(
this is working
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', function (e) { console.log("clicked (Try to open Accordion): " + e.target) });
but this is preferable (not working):
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', myfunction('point_111_11'));
function myfunction(seclectedId){
//do something with seclectedId
console.log(seclectedId)
}
or even
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").myBindFunction('point_111_11')
which will do .on('click') or something similar inside ...
As specified in the ticket you raised you can create DOM elements and pass them to the bindPopup method ... so you can do this :
var domelem = document.createElement('a');
domelem.href = "#point_555_444";
domelem.innerHTML = "Click me";
domelem.onclick = function() {
alert(this.href);
// do whatever else you want to do - open accordion etc
};
point["point_555_44"] = new L.Marker(new L.LatLng(51.641485, -0.15362)).bindPopup(domelem);
You just need to update the onclick function to do what you need it to do ....
Here is the above section of code within your example