I'm working on a OpenLayers map that will display multiple KML layers at once. I want to be able to click on a feature from any layer and have a pop-up show me some info. So far I can only click on the most recently added layer. If I want to click on a previously added layer I have to turn off all the layers that were added before. Obviously this is less than ideal. Here's my code so far:
var select = [];
function addLayer(layerId, layerLink, layerColor)
{
var kmlLayer = new OpenLayers.Layer.Vector("Layer_"+layerId, {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: layerLink,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
kmlLayer.events.on({
"featureselected": onKMLSelect,
"featureunselected": onKMLUnselect
});
select["Layer_"+layerId] = new OpenLayers.Control.SelectFeature(kmlLayer);
map.addControl(select["Layer_"+layerId]);
select["Layer_"+layerId].activate();
map.addLayer(kmlLayer);
}
function onKMLPopupClose(evt) {
for(s in select)
{
select[s].unselectAll();
}
}
function onKMLSelect(event) {
var feature = event.feature;
var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
content,
null, true, onKMLPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onKMLUnselect(event) {
var feature = event.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
Any help would be greatly appreciated.
Thanks,
I had the same problem a while ago. You can find good example about this from Openlayers Examples: OpenLayers Select Feature on Multiple Layers Example.
Here is main parts of the code:
var map, selectControl;
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1");
var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2");
map.addLayers([wmsLayer, vectors1, vectors2]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
selectControl = new OpenLayers.Control.SelectFeature(
[vectors1, vectors2]
);
map.addControl(selectControl);
selectControl.activate();
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
vectors1.addFeatures(createFeatures());
vectors2.addFeatures(createFeatures());
vectors1.events.on({
"featureselected": function(e) {
showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
},
"featureunselected": function(e) {
showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
}
});
vectors2.events.on({
"featureselected": function(e) {
showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
},
"featureunselected": function(e) {
showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
}
});
}
this is what i do to have all features on CHOSEN layers become selectable calling to popup windows:
var selectStop = new OpenLayers.Control.SelectFeature([layerKMLClient, layerKMLStops, layerKMLTarget],{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
layerKMLStops.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
layerKMLClient.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
layerKMLTarget.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
map.addControl(selectStop);
selectStop.activate();
note that i have multiple other layers (mostly from KML files, but also some vector layers from txt files) whose features are NOT SELECTABLE. you can change your behaviors by customizing the onFeatureSelect for each layer type.
BONUS: if you decide to use cluster strategy on (some of) your layers (believe me, you will, at some point in time) - include a check for feature.cluster being true inside your onFeatureSelected function statement:
function onFeatureSelect(event) {
var feature = event.feature;
if (feature.cluster) {
Related
I'm using open layers 6 for an application.
I render mutltiple layers on a map.
On my map for exemple, I have 2 differents layers :
this.layers["PointOfInterest"] = new appli.map.PointOfInterestLayer(this.map, this.layersName.POI);
this.layers[this.layersName.POI].addLayer();
this.layers[this.layersName.POI].addFeaturesPOI();
this.layers["PHOTO"] = new appli.map.PhotoLayer(this.map, this.layersName.PHOTO);
this.layers[this.layersName.PHOTO].addLayer();
this.layers[this.layersName.PHOTO].addFeaturesPHOTO();
My layers :
appli.map.PointOfInterestLayer.prototype = {
addLayer() {
this.source = new ol.source.Vector({
projection: config.projection
});
this[layerProperty] = new ol.layer.Vector({
name: this.type,
source: this.source,
style: (feature) => this.getStyle(feature),
zIndex: 1,
});
this.hoverInteraction = new ol.interaction.Select({
layers:[this[layerProperty]],
});
}
My problem is that, sometimes, the features are place at the exact same location on the map, and we can't see the entire icone representing it.
Is there a way to automatically move the feature to the closest place, in order to have the ability to clic on the 2 differents features ?
I am trying to make an Icon feature that I can click on easier on mobile phones. I have an icon set up nicely and when using a mouse to click on it there is no issue. However when using my finger or thumb on a mobile phone it is quite difficult to get an accurate click. I am using a ol.geom.Point and giving it an icon style. I tried an ol.geom.Circle but I can't get the icon style to work with it.
Here is an example of my working ol.geom.Point:
for (i in spots) {
var spot = spots[i];
var coords = spot['coords'];
var lat = parseFloat(coords.split(',')[0]);
var lng = parseFloat(coords.split(',')[1]);
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat])),
type: 'spot'
});
iconFeature.setStyle(spotMarker);
features.push(iconFeature);
}
vectorSourceSpots = new ol.source.Vector({
features: features
});
var vectorLayer = new ol.layer.Vector({
source: vectorSourceSpots
});
map.addLayer(vectorLayer);
Here is the spotMarker style:
var spotMarker = new ol.style.Style({
image: new ol.style.Icon(({
src: 'images/spot.png'
}))
});
I've also tried with a ol.geom.Circle but I could not see my icon when I tried this:
for (i in spots) {
var spot = spots[i];
var coords = spot['coords'];
var lat = parseFloat(coords.split(',')[0]);
var lng = parseFloat(coords.split(',')[1]);
var iconFeature = new ol.Feature({
geometry: new ol.geom.Circle(ol.proj.fromLonLat([lng, lat]), 5),
type: 'spot'
});
iconFeature.setStyle(spotMarker);
features.push(iconFeature);
}
vectorSourceSpots = new ol.source.Vector({
features: features
});
var vectorLayer = new ol.layer.Vector({
source: vectorSourceSpots
});
map.addLayer(vectorLayer);
What I want is to have the icon remain the same size, but just to increase the click radius around the icon. Almost like an invisible circle a bit bigger than the icon with the same center.
Is this possible?
You will use forEachFeatureAtPixel to add event on the features, then you can set hitTolerance on its options parameter.
check this api document: forEachFeatureAtPixel
you may need to write:
var addEvent = function(map, evt) {
map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
}, {
hitTolerance: 10
});
};
map.on('click', function(evt) {
addEvent(map, evt);
});
I am using Openlayers map. I want a feature when a user clicks on the map the marker should be created but at the same time the existing marker which is already on the map should be deleted or removed and only the latest one should be visible.
var markers = new OpenLayers.Layer.Markers( "Markers" );
markers.id = "Markers";
me.OpenLayers.addLayer(markers);
/*myMarker = new OpenLayers.Marker(new OpenLayers.Marker( 56.512438257836,27.335700987698 ));
markers.addMarker(myMarker);*/
var size = new OpenLayers.Size(30,30);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
//map.setCenter (lonLat, zoom);
me.OpenLayers.events.register("click", kijs_map_container, function(evt) {
var lonlat = me.OpenLayers.getLonLatFromViewPortPx(evt.xy).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
$("#edit-field-jena-seta-map-openlayers-wkt").val('GEOMETRYCOLLECTION(POINT('+lonlat.lat+' '+lonlat.lon+'))');
var pos = me.OpenLayers.getLonLatFromPixel(evt.xy);
alert(baltic_long);
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(baltic_lat, baltic_long),icon);
markers.addMarker(marker);
marker.events.register("click", marker, function(e){
});
//updateMaker(myMarker, pos);
});
Remove all markers on layer before creating and adding new one:
markers.clearMarkers();
markers.addMarker(marker);
See clearMarkers for more details.
Probably when you place var marker and initialize icon outside of the me.OpenLayers.events.register(); scope it will possibly be reinitiated the moment you click again for a new marker.
var marker;
icon = new OpenLayers.Icon( ... );
me.OpenLayers.events.register("click", kijs_map_container, function(evt) {
var pos = me.OpenLayers.getLonLatFromPixel(evt.xy);
marker = new OpenLayers.Marker(pos, icon);
markers.addMarker(marker);
});
At least I haven't tested this particular example here, but was my experience with a map editor I'm making.
I am using ArcGIS JavaScript 3.7 API's and i am using agsjs.dijit.TOC control and it is working fine but when i added Label Layer in my map that time Label layer is coming fine but TOC is not working Properly.
While Pressing the checkbox to On-Off the Layer it is working fine but regarding the feature layer i added one Label layer that is not getting On-Off
Can anyone tell me how to Switch-Off or On the Label Layer.
Thanks in Advance.
I am Pasting some code..
Var load = function () {
require(["dojo/_base/Color", "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer", "esri/renderers/ScaleDependentRenderer"],
function (Color, TextSymbol, SimpleRenderer, ScaleDependentRenderer) {
var statesColor = new Color("#666");
var fieldLabel = new TextSymbol().setColor(statesColor);
fieldLabel.font.setSize("4pt");
fieldLabel.font.setFamily("arial");
statesLabelRenderer = new SimpleRenderer(fieldLabel);
return statesLabelRenderer;
});
}
var layers = [];
var layer = new esri.layers.FeatureLayer(url, {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
layers.push(layer);
layerInfo.push({ layer: layer, title: item["LookupDisplayDesc"], boxLabel: item["LookupDisplayDesc"], id: layer.id, checked: layer.visibleAtMapScale, slider: true });
if (item["LookupLongDesc"] != null && item["LookupLongDesc"] != "") {
var fieldNames = item["LookupLongDesc"].split(",");
var labelFields = "";
for (var i = 0 ; i < fieldNames.length ; i++) {
labelFields = labelFields + "${" + fieldNames[i].trim() + "},";
}
labelFields = labelFields.slice(0, -1).trim();
load();
var labelLayer = new esri.layers.LabelLayer();
labelLayer.addFeatureLayer(layer, statesLabelRenderer, labelFields);
layers.push(labelLayer);
}
}
map.addLayers(layers);
dojo.connect(map, 'onLayersAddResult', function (results) {
if (layerInfo.length > 0) {
var legendDijit = new esri.dijit.Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
toc = new agsjs.dijit.TOC({
map: map,
layerInfos: layerInfo
}, 'LayerDiv');
toc.startup();
});
Not familiar with how TOC works, I build my layer logic manually. If you go the manual route you can just use show and hide like below or use setVisibleLayers like this.
A simple show and hide in your layer logic would be:
labelLayer.hide();
labelLayer.show();
I'm working on a property rental site. On the site I'd like to have a Google map, with all of the properties marked, and the local bus routes drawn, so that renters can see the proximity of the properties to the route.
I've achieved the first part of the problem; I've plotted the properties using markers. Now I need to add the bus route.
I've looked in to this and I can't quite work out the best way to achieve it. I looked at polylines and at using this tool, but the route is complex and would take hundreds of co-ordinates.
There is some kind of route api, as in this post but apparently it can only take 8 waypoints. Is that right?
Ideally I'd like to draw the map by selecting a start point, an end point, and dragging the route into place; and then somehow importing that route into what I have.
Here is the exact route that I want to import: http://www2.warwick.ac.uk/services/accommodation/landlords/12busroutes/.
My code to plot the properties is:
var siteRoot = "<?php bloginfo('stylesheet_directory');?>/";
var markers = [
<?php
$my_query = new WP_Query( 'post_type=properties' );
while ($my_query->have_posts()) : $my_query->the_post();
kdev_maps('list');
endwhile; // end of the loop.
?>
];
function googlemap() {
jQuery('#map_canvas').css({'height': '400px'});
// Create the map
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
// Create the shared infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("div");
var title = document.createElement("div");
var boxText = document.createElement("div");
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-117,-200)
,zIndex: null
,boxStyle: {
background: "url('"+siteRoot+"images/house-icon-flat.png') no-repeat"
,opacity: 1
,width: "240px"
,height: "190px"
}
,closeBoxMargin: "10px 0px 2px 2px"
,closeBoxURL: "http://kdev.langley.com/wp-content/themes/langley/images/close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var infoWindow = new InfoBox(myOptions);
var MarkerImage = siteRoot+'images/house-web-marker.png';
// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.title,
content: data.html,
icon: MarkerImage
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, this);
title.innerHTML = marker.getTitle();
infoWindow.setContent(marker.content);
infoWindow.open(map, marker);
jQuery(".innerinfo").parent().css({'overflow':'hidden', 'margin-right':'10px'});
});
}
// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var origcent = new google.maps.LatLng(map.getCenter());
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
closeInfoWindow = function() {
infoWindow.close();
};
google.maps.event.addListener(map, 'click', closeInfoWindow);
google.maps.event.addListener(infoWindow, 'closeclick', function()
{
centermap();
});
function centermap()
{
map.setCenter(map.fitBounds(bounds));
}
}
jQuery(window).resize(function() {
googlemap();
});
Any help is much appreciated.
Its worth looking at two things:
1) The GTFS format (https://developers.google.com/transit/gtfs/reference) this is a csv-based format that allows someone to cross reference transit times and routes, if you are lucky then the data will have been assembled for you for your transit authority :)
2) If you can pull in the coordinates then you can make a line feature as long as you want (within the bounds of browser capacity). This is done in much the same way as you pull in markers, except you pull the features you want into a polyline:
like this (from gmaps docs):
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
you will build your array from php, of course :)
hope that helps.
If you use free google maps you can use a start point, end point and 8 way point. In google maps api premiere you can use 23 way point for routing vehicles