How to customize leaflet maps to disable one-finger scroll on mobile devices and add two finger scroll like google maps (see https://developers.google.com/maps/documentation/javascript/interaction)
I think something like a listener on finger down and finger up and a custom overlay or sth. like that should help. But how to correctly integrate this as a plugin in leaflet?
<html>
<head>
<link href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid', {center: [48,9], zoom:8, layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]});
</script>
</body>
</html>
Simply set the dragging option of your map to false, but be sure to keep the touchZoom option as true. This will disable one-finger dragging, while allowing the user to perform pinch-zoom with two fingers, which also pan the map around.
If you want this behaviour only in mobile devices, use L.Browser.mobile to set the value of the dragging option, as in
var map = L.map('map', { dragging: !L.Browser.mobile });
Here is a working solution founded here. All credits to #BlueManCZ comment
L.map('map', {
dragging: !L.Browser.mobile,
tap: !L.Browser.mobile
})
As mention in comment by Corrodian, you can find GestureHandling plugins on Leaflet.
It was created by elMarquis in can be found here https://elmarquis.github.io/Leaflet.GestureHandling/examples/
I've done with this plugins by including css and js after leaflet:
<link rel="stylesheet" href="css/leaflet-gesture-handling.min.css" type="text/css">
<script src="js/leaflet-gesture-handling.min.js"></script>
And add gestureHandling option in map like this:
var map = L.map("map", {
center: [-25.2702, 134.2798],
zoom: 3,
gestureHandling: true
});
It works!
var map = L.map('map', {dragging: false});
map.setView([lat, lng], zoom);
-or together-
var map = L.map('map',{dragging: false}).setView([lat, lng], zoom);
Related
I am using ngmap and whenever i import KML polygon file the polygon is drown on the map.
I have an issue concerning zooming on the polygon.
Is there any way to calculate the polygon center (lattitude and longitude) ?
if not is there anyway to zoom on the polygon after drawing it on the ngmap.
Thank you
Whenever KML layer is added and the preserve-viewport attribute of kml-layer directive is set to true, the map is automatically getting centered based on layer viewport (it also means there is no need to specify the center explicitly)
To determine KML layer center:
1) set id attribute of kml-layer directive to reference KML Layer
<kml-layer preserve-viewport="true" id="myLayer" url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>
2) once the layer is rendered, get the instance of KML layer and then the center via google.maps.KmlLayer.getDefaultViewport function:
NgMap.getMap().then(function(map) {
var layer = map.kmlLayers["myLayer"]
var center = layer.getDefaultViewport().getCenter();
});
Example
angular.module('mapApp', ['ngMap'])
.controller('mapCtrl', function($scope, NgMap) {
NgMap.getMap().then(function(map) {
$scope.map = map;
var layer = map.kmlLayers["myLayer"]
var center = layer.getDefaultViewport().getCenter();
console.log(center.toString()); //
map.fitBounds(layer.getDefaultViewport());
});
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<ng-map center="21.876,-27.624" zoom="5" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;">
<kml-layer preserve-viewport="true" id="myLayer" url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>
</ng-map>
</div>
I have a tough problem to fix, spent some hours and still stucked so I need your help now.
I'm developing an application for exchange students using cordova and Ripple emulator. I simply want to display a map with Google Maps API.
But I have always a grey background event if the styles buttons and google footer are loaded and displayed as shown below :
Image of my Grey problem
When I first load my page I have really quickly an image of australia (and then uluru which correspond to the code following) but then the google frame is loaded and grey screen take place again.
To prevent to get this solution, yes I allow every links in my Content Security Policy.
Image of my Content Security Policy
Here is the code of my html page for the map (i use angularJS) :
<section class="panel" ng-controller="MapController">
</head>
<body>
<div class="panelFilters"></div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCirwIL6S55w7cmDLhxo3exIsjn9DwPVtc&callback=initMap">
</script>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
map.refresh();
}
</script>
</body>
</section>
And then here the code of my MapController that I call in my html page :
function MapController($scope){
var isOpen = false;
var map = document.getElementById('map');
$(".header").click(function(){
if(!isOpen){
$('.header').empty().append("Search filters");
isOpen = true;
}else{
$('.header').empty().append("||");
isOpen = false;
}
$(".panelFilters").slideToggle();
})
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
console.log("resized");
});
google.maps.event.trigger(map, 'resize');
}
I absolutely don't know if the problem is related to my code, to ripple or to cordova. Every tip and help is welcome.
Thanks.
I am using ngmap and angularjs to create markers in google map. All ok, but when I zoom out in the map the markers move.
My Code:
var app = angular.module('dataview', ['ngMap'])
app.controller('DataViewCtrl', function($scope, $http)
{
$scope.markers=[{lat:30.2817, lng:-81.5273},{lat:30.6824, lng:-81.9680},{lat:31.0004, lng:-82.1580}];
$scope.mapcenter={lat:$scope.markers[0].lat, lng:$scope.markers[0].lng};
}
<script src = 'http://maps.google.com/maps/api/js?v=3&sensor=true'></script>
<script src = '/assets/vendor/ngmap/build/scripts/ng-map.min.js'></script>
<map center="{{mapcenter.lat}}, {{mapcenter.lng}}" zoom="5" ng-if="is_map" style="height: 500px;">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>
Resul OK
Bad Resul (when zoom out)
I had the same problem and I suppose you put the minimum code for the example. In my case, the problem was in SVG images of marker icons. I solved the problem by changing the images by others. Try default icons to test if you have the same problem.
A working example of what you are trying to achieve is here:
http://plnkr.co/edit/P5Tlui
Note how the markers position is now maintained when you zoom out.
I fixed the issue by assigning the markers' coordinates as following:
$scope.markers = [{
lat: 30.2817,
lng: -81.5273
}, {
lat: 30.6824,
lng: -81.9680
}, {
lat: 31.0004,
lng: -82.1580
}];
For some reason, In css file I put
canvas{width: 100% !important; height: 360px !important;}
I remove this line and fixed the problem. cavas style to conflict with height defined for map in html
I am using reveal.js. My slides are saved in a json object. For some reason the output is only one slide with everything overwritten! Here is my code:
<div class="reveal">
<div class="slides" data-ng-controller="myControl">
<section data-ng-repeat="slide in allSlide">
{{slide}}
</section>
</div>
</div>
and my js code
$scope.allSlide = [...];
I found in the code here that reveal.js works with ng-repeat but what is the problem with mine?
Any help appreciated.
Update: Scripts are included like below at the end of html file:
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
Reveal.initialize({
});
</script>
This is difficult because angularJS won't have finished rendering when reveal.js attempts to interpret the HTML into a slide show. You could try the following, which was from the link you posted where it was working:
<script>
setTimeout(function() {
Reveal.initialize({});
}, 200);
</script>
Here's the relevant line from the working demo you posted:
https://github.com/robinComa/html5-presentation/blob/master/app/scripts/modules/reveal.js#L26
setTimeout(function(){
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// ... some stuff in here
});
}, 200);
Perhaps it would be a good idea to have the structure of the slides defined in advance, rather than using an ng-repeat? Perhaps lay out the sections without ng-repeat (so reveal can interpret without a timeout) and then use ng-include to get your duplicated layouts into each section block.
I'm learning AngularJS. I'm trying to add AngularJS to a long piece of code which works,and which includes some graphics using a canvas. I was able to reproduce the problem with the minimal code below. Basically, I just need to load AngularJS and that's it, my code doesn't work. I've been searching trough the angularjs site, but have not found anything.
If I comment the line that loads angularjs, a rectangle gets drawn. If I use the code as it is, the screen is empty.
`!DOCTYPE html>
<head>
<html xmlns:ng="http://angularjs.org" ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
</head>
<body>
<canvas id='canvas' width='500' height='500'>Canvas is not supported by this browser.</canvas>
<script src="angular.js">
<script type="text/javascript" >
function DrawMe() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.strokeStyle = '#808080';
context.fillRect(0, 0, canvas.width, canvas.height);
}
$( document ).ready(function() {
DrawMe();
});
</script>
</body>
</html>`
You need to get a reference to your canvas element:
function DrawMe() {
// get a reference to the canvas element
var canvas=getElementById("canvas");
var context = canvas.getContext('2d');
context.strokeStyle = '#808080';
context.fillRect(0, 0, canvas.width, canvas.height);
}