Use JavaScript to feed data into DOM? - javascript

In openstreetmap I'm using openlayer3 to display some data information about random building. It's a simple interaction, when you click on marker data will be presented.
I'm not good in JavaScript so I had some help, and after a while a set up everything like this, you can check it in this JSFIDDLE example.
So, I'm using ol.Feature.html#on to bind event to markers, and I'm loading data with info.innerHTML = "<h1>"+data.name+"</h1>", and everything is looking like this:
/* Create the map */
// setting up coordinates for map to display
var infobox = document.getElementById("info");
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857');
// setting up openlayer3 view
var view = new ol.View({
center: city,
zoom: 13
});
// Create the map
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: view
});
var Data =
[ { name: "foo",
address: "Some Random Address 1"
, longlat: [-73.927870, 40.763633]
}
, { name: "foo2",
address: "Some Random Address 2"
, longlat: [-73.917356, 40.763958]
}
, { name: "foo3",
address: "Some Random Address 3"
, longlat: [-73.915530, 40.779665]
}
, { name: "foo4",
address: "Some Random Address 4"
, longlat: [-73.916045, 40.779372]
}
, { name: "foo5",
address: "Some Random Address 5"
, longlat: [-73.919682, 40.777365]
}
, { name: "foo6",
address: "Some Random Address 6"
, longlat: [-73.908980, 40.776013]
}
];
function buildFeature(data) {
return new ol.Feature(
{ geometry: new ol.geom.Point(ol.proj.fromLonLat(data.longlat))
, data: data
}
);
}
function curryclickonmarker(element) {
return function (event) {
return clickOnMarker(element, event);
}
}
function clickOnMarker(info, event) {
// This is ugly!
var marker = event.selected[0];
var data = marker.G.data;
// Feed data into DOM
info.innerHTML = "<h1>"+data.name+"</h1>";
}
var selectClick = new ol.interaction.Select();
selectClick.on("select", curryclickonmarker(infobox));
// Setup markers
var features = Data.map(buildFeature);
var markers = new ol.layer.Vector({
tittle: 'City Apratments',
source: new ol.source.Vector({
features: features
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixel',
opacity: 0.75,
src: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',
})
})
});
map.addLayer(markers);
map.addInteraction(selectClick);
I would like to make this look better, it's looking very ugly, so I need someone to explain to me how can I pass multiple data for the marker, because currently I can only see foo, foo1, foo2, foo3, etc, I'm using openlayers3 API for event's, but can I use pure javascript for this so I can pass addres, pictures, description for the specific marked building, because I need to display a loot, I'm just having hard time understanding how to use javascript to pass more data?

Related

OpenLayers - Heatmap | Override default overlap weight calculation

I am trying to implement an OpenLayers Heatmap to visualize some data on a map. My goal is to display heatmap points with given weights. Currently my poc code looks like this:
const features = [
{ lat: 46.934942, lon: 17.891804, id: 10, value: 6.5 },
{ lat: 46.93489, lon: 17.892713, id: 11, value: 5.2 },
{ lat: 46.934662, lon: 17.892331, id: 12, value: 5.9 },
].map((item) => {
const feature = createFeature({
lon: item.lon,
lat: item.lat,
id: `${item.id}`,
customStyle: new olStyle.Style({
image: new olStyle.Circle({
radius: 5,
fill: new olStyle.Fill({
color: "#AB1F58",
}),
}),
}),
});
feature.setProperties({ value: item.value });
return feature;
});
const newLayer = new olLayer.Heatmap({
source: new olSource.Vector({
features,
}),
blur: 0,
radius: 50,
weight(feature) {
return feature.getProperties().value / 10;
},
});
map.addLayer(newLayer)
Example image
My problem is that OpenLayers sums the values when the features overlap but I would like the overlap area to have the average value.
Is this possible or should I look for another solution?
One way that I can think of is by using a Cluster source. Write your own createCluster function to return a new feature with an average value and display this.

How to create a VectorSource in OpenLayer 6.5 from a JavasSript object?

I want to create a web app which is using OpenLayer 6.5. I want to mark some locations dynamically so I can't keep some ".geojson" files on my server. What should I do?
I'm trying to create a VectorSource from a JavaScript GeoJson object but it always shows a false location! What's wrong with this code?
var GeoJSONObject = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: [
70.33447265624999,
55.541064956111036
]
}
}
]
};
var vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(GeoJSONObject)
});
var vectorLayer = new ol.layer.Vector({
renderMode: 'image',
source: vectorSource,
visible: true,
title: "Plant",
style: new ol.style.Style({
image: circleStyle
})
});
map.addLayer(vectorLayer);
I solved this problem by using ol.style.Icon instead of Vector! If you have this problem, look at this: https://openlayers.org/en/latest/examples/icon.html

Add Markers from Object Array

Pardon me if this question is silly. I've got an array in an object that I need to add to a map. I know it needs a for loop (likely in the object) to access the additional properties in the array. Only the last indexed value is shown on the map when I execute the code. Thanks in advance for your help.
var map = L.map('map', {
center: [29.940125, -90.08346],
zoom: 13
});
// Get basemap URL from Leaflet Providers
var basemap_url = 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
// Get basemap attributes from Leaflet Providers
var basemap_attributes = {
maxZoom: 18,
attribution: '© OpenStreetMap'
};
// requests some map tiles
var tiles = L.tileLayer(basemap_url, basemap_attributes);
map.addLayer(tiles);
var i = 0
// declare hotspots object
var hotspots = [{
name: "Mariza",
properties: {
description: "Italian-inspired fare dished out in an airy loft building with an industrial-chic vibe.",
coordinates: [29.9629337, -90.0501008],
url: 'http://marizaneworleans.com/',
phone: '(504) 598-5700',
icon: 'svgs/restaurant-15.svg'
},
name: "Tipitina's",
properties: {
description: "Founded as a clubhouse for Professor Longhair, Tip's has played host to NOLA music legends since opening its doors in 1977.",
coordinates: [29.917284, -90.042986],
url: 'https://www.tipitinas.com//',
phone: '(504) 895-8477',
icon: 'svgs/music-15.svg'
},
name: "Euclid Records New Orleans",
properties: {
description: "We’re 4000 square feet of boss vinyl both new and used.",
coordinates: [29.962066, -90.042970],
url: 'https://euclidnola.com/',
phone: '(504) 947-4348',
icon: 'svgs/music-11.svg'
}
}];
// declare variable for accessing object properties
var props = hotspots[i].properties;
var icon = L.icon({
iconUrl: props.icon,
iconSize: [40, 40],
popupAnchor: [0, -22],
className: "icon"
});
var popup = `<h3>${hotspots[i].name}</h3>
<p>${props.description}</p>
<p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
<p><b>phone</b>: ${props.phone}</p>`
var marker = L.marker(hotspots[i].properties.coordinates, {
icon: icon
})
.addTo(map)
.bindPopup(popup);
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
You need a for loop in order to iterate over all the hotspots and add them to the map:
var map = L.map('map', {
center: [29.940125, -90.08346],
zoom: 13
});
// Get basemap URL from Leaflet Providers
var basemap_url = 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
// Get basemap attributes from Leaflet Providers
var basemap_attributes = {
maxZoom: 18,
attribution: '© OpenStreetMap'
};
// requests some map tiles
var tiles = L.tileLayer(basemap_url, basemap_attributes);
map.addLayer(tiles);
// declare hotspots object
var hotspots = [{
name: "Mariza",
properties: {
description: "Italian-inspired fare dished out in an airy loft building with an industrial-chic vibe.",
coordinates: [29.9629337, -90.0501008],
url: 'http://marizaneworleans.com/',
phone: '(504) 598-5700',
icon: 'svgs/restaurant-15.svg'
},
name: "Tipitina's",
properties: {
description: "Founded as a clubhouse for Professor Longhair, Tip's has played host to NOLA music legends since opening its doors in 1977.",
coordinates: [29.917284, -90.042986],
url: 'https://www.tipitinas.com//',
phone: '(504) 895-8477',
icon: 'svgs/music-15.svg'
},
name: "Euclid Records New Orleans",
properties: {
description: "We’re 4000 square feet of boss vinyl both new and used.",
coordinates: [29.962066, -90.042970],
url: 'https://euclidnola.com/',
phone: '(504) 947-4348',
icon: 'svgs/music-11.svg'
}
}];
//// LOOP GOES HERE: ////
for ( let i = 0; i < hotspots.length; i++ ){
// declare variable for accessing object properties
let props = hotspots[i].properties;
let icon = L.icon({
iconUrl: props.icon,
iconSize: [40, 40],
popupAnchor: [0, -22],
className: "icon"
});
let popup = `<h3>${hotspots[i].name}</h3>
<p>${props.description}</p>
<p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
<p><b>phone</b>: ${props.phone}</p>`
let marker = L.marker(hotspots[i].properties.coordinates, {
icon: icon
})
.addTo(map)
.bindPopup(popup);
marker.on("mouseover", function() {
this.openPopup();
});
marker.on("mouseout", function() {
this.closePopup();
});
}
There isn't a loop anywhere, so i is always going to be 0
Put it in a for-loop?
for(var i = 0; i < hotspots.length; i++) {
var props = hotspots[i].properties;
var icon = L.icon({
iconUrl: props.icon,
iconSize: [40, 40],
popupAnchor: [0, -22],
className: "icon"
});
var popup = `<h3>${hotspots[i].name}</h3>
<p>${props.description}</p>
<p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
<p><b>phone</b>: ${props.phone}</p>`
var marker = L.marker(hotspots[i].properties.coordinates, {
icon: icon
})
.addTo(map)
.bindPopup(popup);
}

Creating an event on a map maker

//Final Code
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
// -- GeoJSON layer --
// Define a GeoJSON source that will load features via a http call. By
// specifying the projection of the map's view OL3 will transform the coordinates
// for display
var planningAppsSource = new ol.source.GeoJSON({
'projection': map.getView().getProjection(),
'url': 'http://localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
});
// Create a vector layer to display the features within the GeoJSON source and
// applies a simple icon style to all features
var planningAppsLayer = new ol.layer.Vector({
source: planningAppsSource,
style: new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 40],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'marker-icon.png'
}))
})
});
// Add the layer to the map
map.addLayer(planningAppsLayer);
var input = document.getElementById('input-airports');
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(
evt.pixel, function(ft, l) { return ft; });
if (feature) {
console.log(feature.getProperties());
input.value = feature.get('desc');
}
});
map.on('pointermove', function(e) {
if (e.dragging) return;
var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
});
I succeed creating a simple map with OL3 with static markers pointing airports which take them data in an external JSON file.
But now i would like that when i click on a marker, create a function which find the name of the airport corresponding to the marker, in my JSON file and show it in an external field type:input.
I already tried to create a click event on my marker, an open layers interaction, try to take back some data in my Json File. but it seems like i'm missing something, all my little parts doesn't fit all together.
I don't know where i can start :s
Thank you all for your answers.
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
// -- GeoJSON layer --
// Define a GeoJSON source that will load features via a http call. By
// specifying the projection of the map's view OL3 will transform the coordinates
// for display
var planningAppsSource = new ol.source.GeoJSON({
'projection': map.getView().getProjection(),
'url': 'http://localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
});
// Create a vector layer to display the features within the GeoJSON source and
// applies a simple icon style to all features
var planningAppsLayer = new ol.layer.Vector({
source: planningAppsSource,
style: new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 40],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'marker-icon.png'
}))
})
});
// Add the layer to the map
map.addLayer(planningAppsLayer);
// Map Click event
planningAppsSource.addEventListener(map, 'click', function(event){
var getHttpRequest = function () {
var httpRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
return httpRequest
}
});
GeoJSON:
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-145.494,
-17.3595
]
},
"type": "Feature",
"properties": {
"code": "AAA",
"lon": "-17.3595",
"lat": "-145.494",
"name": "Anaa Airport",
"city": "Anaa",
"state": "Tuamotu-Gambier",
"country": "French Polynesia",
"woeid": "12512819",
"tz": "Pacific\/Midway",
"phone": "",
"type": "Airports",
"email": "",
"url": "",
"runway_length": "4921",
"elev": "7",
"icao": "NTGA",
"direct_flights": "2",
"carriers": "1"
}
}
Just add these two listeners (and remove all that planningAppsSource.addEventListener stuff):
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(
evt.pixel, function(ft, l) { return ft; });
if (feature) {
// just to show all your feature's properties
console.log(feature.getProperties());
// to get a specific property
var name = feature.get('name');
var city = feature.get('city');
}
});
// you don't actually need this
// this is only to change the cursor to a pointer when is over a feature
map.on('pointermove', function(e) {
if (e.dragging) return;
var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

Merge tool tip of overlapping Markers on Google Map

Currently, I am displaying 500-600 Markers on Google map, with their names as tooltip. Now,
I need to display the tool-tip of all overlapping markers as comma-separated i.e. Marker1, Marker2, Marker3 etc. if Marker1, Marker2, Marker3 are overlapped on map.
I found many other different examples on google map at internet especially at GeoCodeZip, but not of my requirement.
if this requirement is once filled, Am afraid of performance issues on zoom changed events, as tooltip needed to be updated (if overlapping is changed).
Update1 : I have already show Overlapping Marker spiderfier to client but not acceptable.
Does anyone have right path or working example ?
Thanks
-Anil
The core of this is to find the pixel distance between LatLngs. Then before adding each marker check the pixel distance between it and any existing markers. If there is another marker nearby add to the title otherwise create a new marker. jsFiddle
function init() {
var mapOptions = {
center: new google.maps.LatLng(0, -0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
// to get the pixel position from the latlng
// https://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
google.maps.event.addListenerOnce(map, 'idle', function() {
if (overlay.getProjection()) {
var points = [
{ latlng: new google.maps.LatLng(40, -100), title: '1' },
{ latlng: new google.maps.LatLng(40.125, -100.125), title: '2' },
{ latlng: new google.maps.LatLng(40.25, -100.25), title: '3' },
{ latlng: new google.maps.LatLng(40.5, -100.5), title: '4' },
{ latlng: new google.maps.LatLng(40.75, -100.75), title: '5' },
{ latlng: new google.maps.LatLng(41, -101), title: '6' },
{ latlng: new google.maps.LatLng(35, -95), title: '7' },
{ latlng: new google.maps.LatLng(45, 105), title: '8' },
{ latlng: new google.maps.LatLng(25, -115), title: '9' },
{ latlng: new google.maps.LatLng(55, -85), title: '10' },
{ latlng: new google.maps.LatLng(30, -34), title: '11' }
];
// for each point
var markers = [];
points.forEach(function (point) {
var nearby = false;
var pointPixelPosition = overlay.getProjection().fromLatLngToContainerPixel(point.latlng);
markers.forEach(function(marker) {
var markerPixelPosition = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
// check for marker 'near by'
if (Math.abs(pointPixelPosition.x - markerPixelPosition.x) < 10 || Math.abs(pointPixelPosition.y - markerPixelPosition.y) < 10) {
nearby = true;
marker.setTitle(marker.getTitle() + ', ' + point.title);
}
});
// create new marker
if (!nearby) {
markers.push(new google.maps.Marker({ map: map, position: point.latlng, title: point.title }));
}
});
}
map.setCenter(new google.maps.LatLng(39.8282, -98.5795));
});
}

Categories