Replicate event pinch from a div to openlayer map - events

Good afternoon,
I have a div over the ol3 map with one list of marker. When the user clic on a marker, the center's map is updated with the coordinate of this marker.
I tried that the user have the possibility to zoom on the map when he "pinch" on the layer on top.
I successed to intercept the event on the "layerOnTop" and replicate it to the map layer. With console.log, I saw that the job is correctly done but there is any reaction on the map.
You can see the code : http://jsfiddle.net/2ek4j3a4/
var center = ol.proj.transform([4.90756, 45.5172], 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
target: 'map',
controls: ol.control.defaults({attributionOptions: ({ collapsible: false})}),
view: new ol.View({center: center,zoom: 12})
});
$('#layerOnTop').on("touchmove", function(event) {
var scale = event.originalEvent.touches;
if (scale.length==2) {
event.preventDefault();
var bottomEvent = new $.Event("touchmove");
bottomEvent.pageX = event.pageX;
bottomEvent.pageY = event.pageY;
$("#map").trigger(bottomEvent);
}
});
$('#map').on("touchmove", function(event) {console.log('ok')})
I did my test with an Android phone.
Somebody have an idea, please ?

I finally found :) There was 2 errors in my code :
1) target should be the canvas element in div#map and not #map himself
2) I fixed the touch identifier by Date.now() and add +1 for the second, it was certainely too big
See below the code if one day somebody search ...
$('#layerOnTop').on("touchstart touchmove touchend", function(event) {
view = document.getElementById('map').ownerDocument.defaultView;
if (event.originalEvent.touches.length==2) {
var target = document.getElementById('map').getElementsByTagName('canvas')[0];
var pageX1 = event.originalEvent.touches[0].pageX;
var pageY1 = event.originalEvent.touches[0].pageY;
var pageX2 = event.originalEvent.touches[1].pageX;
var pageY2 = event.originalEvent.touches[1].pageY;
var touch1 = document.createTouch(view, target, 0, pageX1, pageY1, 0, 0);
var touch2 = document.createTouch(view, target, 1, pageX2, pageY2, 0, 0);
var touchList = document.createTouchList(touch1, touch2);
var touchEvent = new TouchEvent(event.type, {cancelable: true, bubbles: true, touches: touchList, targetTouches: touchList, changedTouches: touchList})
target.dispatchEvent(touchEvent);
}
});
http://jsfiddle.net/2ek4j3a4/7/

Related

Bing Map Pushpin - How to add clustering layer on Bing Map with custom data (co-ordinates) using Bing Maps V8 interactive SDK?

I found an official article which is showing, how to add clustering layer to Map but that example takes input from a TestDataGenerator function.I don't know how to pass my information so that map will generate pushpin based on my data.
Bing Map Official Article on "Add clustering layer to map"
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(39.393486, -98.100769),
zoom: 3
});
Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
// Creating sample Pushpin data within map view
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
map.layers.insert(clusterLayer);
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
Please visit the above link if anything is un-clear.
The test data generator returns an array of pushpins. Simply loop through your custom data and create an array of pushpins and then pass that into the clustering layer.
First add a new to your page with id and style display:none
add a gridview to this div
Bind your data to this gridview
Code Sample to bind data to map - works in ie - recently started having issues in Edge and Firefor - works on Safari
Issues seem to be related to attempts to add second cluster layer
Comments appreciated
function loadMap() {
var MaxLat = 0;
var MinLon = 0;
var MinLat = 0;
var MaxLon = 0;
var MLon = 0;
var MLat = 0;
var c;
var Val2;
var Val3;
var Lat;
var Lon;
var Val1;
var PPO;
var Val4;
var Val5;
if (typeof GVBounds !== "undefined" && GVBounds !== null) {
var Mcell = GVBounds.rows[1].cells;
MaxLat = Mcell(0).innerHTML;
MinLon = Mcell(1).innerHTML;
MinLat = Mcell(2).innerHTML;
MaxLon = Mcell(3).innerHTML;
MLat = Mcell(4).innerHTML;
MLon = Mcell(5).innerHTML;
}
var map;
var Rec = MaxLat + "," + MinLon + "," + MinLat + "," + MaxLon
var box = Microsoft.Maps.LocationRect.fromString(Rec);
//var PPCDr = new Microsoft.Maps.Layer();
//var PPCPU = new Microsoft.Maps.Layer();
//var PPCD = new Microsoft.Maps.Layer();
//var PPC = []
var pinDr;
var pinPU;
var pinD;
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
//center: new Microsoft.Maps.Location(MLat, MLon)
}
);
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var Pins = [];
Pins = GetPins();
//Create a ClusterLayer and add it to the map.
clusterLayer = new Microsoft.Maps.ClusterLayer(Pins, { gridSize: 10 });
map.layers.insert(clusterLayer);
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var DrPins = [];
DrPins = GetDrPins();
//Create a ClusterLayer and add it to the map.
DrclusterLayer = new Microsoft.Maps.ClusterLayer(DrPins, { gridSize: 1 });
map.layers.insert(DrclusterLayer);
});
map.setView({ bounds: box, padding: 20 });
}
RayD

Using Geolocation within Google Places API

I'm simply trying to replace the lat long coords to use the browsers geolocation yet I'm getting no result...
Code for the geolocation is;
<script> var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: coords,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
The rest of the code points to the simple places api service;
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
I cannot for the life of me find any reliable tutorials on-line...

Put info from google maps InfoWindow into HTML textbox

I have a map that has lots of markers pulled from a database. Each one displays an InfoWindow with a placename and the lat and lng of the location. I need to have the placename affiliated with a marker added to and HTML textbox on click. I can't seem to find any tutorials on this. Maybe someone can point me in the right direction. I am trying to learn this on my own so apologies if it is sloppily designed. Thanks for your help in advance.
function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(41.640078, -102.669433),
zoom: 3,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("mymap.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + point;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
It needs to go into a simple textbox like this:
<input type = "text" id = "address_box" value = ""/>
To display that data in your HTML text box, change your bindInfoWindow function, add code in there to put the data in the text box:
function bindInfoWindow(marker, map, infoWindow, html, name) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
document.getElementById("address_box").value = name;
});
}
And add name in to the call to it:
bindInfoWindow(marker, map, infoWindow, html, name);
Do you mean, when the infoWindow opens, you want to display some information into the textbox?
If so, this code might help you(I hope).
var infoWindow = new google.maps.InfoWindow;
var address_box = document.getElementById("address_box");
google.maps.event.addListener(infoWindow, "domready", function() {
address_box.value = infoWindow.get("Content");
});

Google Map V3: Loading Markers using AJAX+ASP/PHP and Reload on Ruquest or Event

Hi I've searched so many things and found many contents but didn't found what I required actually.
I can loading all markers but unable to Refresh it or Reload it please help me out here's the code:
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(24.86802, 67.06416);
MYMAP.init('#map', myLatLng, 11);
$(document).ready(function(e){
MYMAP.placeMarkers('testasp.asp');
});
});
var curr_infw;
var MYMAP = {
map: null,
bounds: null,
infowindow:null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var infowindow = null;
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map,
clickable: true,
icon: 'truck_green.png'
});
//var infowindow = null;
infoWindow = new google.maps.InfoWindow();
var html='<strong>'+name+'</strong.><br />'+address;
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
If somebody help me out I want to refresh it using click event or settimeout function though.
Regards and looking forward to hear it here soon. thanks
Not an answer, but what's this meant to be?
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(24.86802, 67.06416);
MYMAP.init('#map', myLatLng, 11);
$(document).ready(function(e){
MYMAP.placeMarkers('testasp.asp');
});
});
Why are you nesting document.ready? Just do
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(24.86802, 67.06416);
MYMAP.init('#map', myLatLng, 11);
MYMAP.placeMarkers('testasp.asp');
});
For event use
google.maps.event.addListener([ mapObject ], 'bounds_changed', function() {
// [ update code here ]
});

Google Maps within a dynamically loaded jquery Accordion

I'm trying to load a google map within a jquery ui accordion with contents loaded by ajax.
$("h2", "#accordion").click(function(e) {
var contentDiv = $(this).next("div");
if (contentDiv.children().length == 1)
{
contentDiv.load($(this).find("a").attr("href"));
contentDiv.ready(function(){
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
})
}
});
That's my current code (Google Maps API V3), but it redirects to the url of the href when I click currently, obviously with no google map because there's no javascript in this response. If I comment out the map line everything works fine (except the map itself).
Well, the thread is dead but since I lost some hours on similar problem I feel like sharing my solution.
I have a jqueryui accordeon with a googlemap in each pane.
The problem is accordeon have no size for hidden panes, and googlemaps uses that size to render the maps.
So I save every 'map' and 'marker' (gmaps terminology) in an indexed array (var maps) and when user changes accordeon pane, I 'refresh' the corresponding gmap.
The catch there is that event resize is not enough, you have to force zoom for redrawn and even then because of the size it had on a closed pane, your marker for that map is completelly off screen so you have recenter it based on the marker position.
$(document).ready(function(){
if($('div.map_canvas').length>0) initializeMap(); //init map
if($('#accordion').length>0) $("#accordion .items").accordion(); //init accordeon
$("#accordion .items").bind("accordionchange", function(event, Element) {
current=maps[Element.options.active];
google.maps.event.trigger(current.map, 'resize'); //resize
current.map.setZoom( current.map.getZoom() ); //force redrawn
current.map.setCenter(current.marker.getPosition()); //recenter on marker
})
});
var maps=Array();
function initializeMap() {
var geocoder;
$('div.map_canvas').each(function(index,Element) {
var address = $(Element).text();
var myOptions = {
zoom: 15,
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myOptions.center = results[0].geometry.location;
map = new google.maps.Map(Element, myOptions);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
maps.push({marker:marker,map:map}); //save those
} else {
alert('The address could not be found for the following reason: ' + status);
}
});
})
}
It didn't occur to me until now, but since the content of each accordion is dynamically loaded, this constitutes an illegal cross site request. The map must be obtained from my own web server and transmitted to the ajax request in the accordion or the google map must be loaded once and manipulated into the dom of the accordion panes being loaded.

Resources