I want the map to show the Netherlands only - zooming

This is my init function to load the map, I want it to show only the Netherlands, zooming in should be possible but zooming out should'nt. I searched all over, but I can't find a proper explanation on how to do this.
var config = {
zoom: 14,
zoomStart: 8,
centerPoint: new OpenLayers.LonLat(622044.536098, 6797086.3022847),
strokeColor: "#941B80",
strokeColor_allloc: "#575757",
strokeOpacity: 0.8,
strokeOpacity_allloc: 0.9,
strokeWeight: 2,
trackWeight: 5,
fillColor: "#941B80",
fillColor_allloc: "#575757",
fillOpacity: 0.25,
fillOpacity_allloc: 0.40,
pointRadius: 5,
fontColor: "black",
fontSize: 10,
fontFamily: "Arial",
scaleFactor: 1000000,
extent: new OpenLayers.Bounds(-5037508, -5037508, 5037508, 5037508.34),
units: 'm',
resolution: 156543.0339,
displayProjection: new OpenLayers.Projection("EPSG:4326"),
projection: new OpenLayers.Projection("EPSG:900913"),
controls: [
new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Attribution()],
copyright: 'Map data © 2010 CC-BY-SA<br />OpenStreetMap.org contributors',
numZoomLevels: 10,
numberPlateTail: new OpenLayers.Size(117.333, 42),
numberPlate: new OpenLayers.Size(117.333, 25),
iconSize: new OpenLayers.Size(32, 37)
};
var myLayers = {
base: new OpenLayers.Layer.OSM('', '', {
attribution: config.copyright,
transitionEffect: 'resize',
layers: 'basic'
}, {
isBaseLayer: true
}),
vector: new OpenLayers.Layer.Vector('Vormen aan/uit', {
styleMap: my_style,
renderers: ['Canvas', 'SVG', 'VML']
}),
allloc_vector: new OpenLayers.Layer.Vector('Vormen aan/uit', {
styleMap: my_style,
renderers: ['Canvas', 'SVG', 'VML']
}),
markers: new OpenLayers.Layer.Markers('Markers')
};
init: function (canvas) {
this.canvas = canvas;
$('#' + canvas).append('<input type="button" class="button" value="Volledig scherm" onclick="tbMap.toggleFs();" />');
this.map = new OpenLayers.Map(this.canvas, {
controls: config.controls,
displayProjection: config.displayProjection,
Projection: config.projection,
maxExtent: config.extent,
maxResolution: config.resolution,
units: config.units,
numZoomLevels: config.numZoomLevels,
theme: null
});
tbMap.zoom();
this.map.addLayers([myLayers.base, myLayers.vector]);
this.map.setCenter(config.centerPoint, config.zoomStart);
},
zoom: function () {
OpenLayers.Control.Navigation.prototype.counter = 0;
//Inzoomgevoeligheid
OpenLayers.Control.Navigation.prototype.wheelUp = function (evt) {
this.counter++;
if (this.counter > 2) {
this.counter = 0;
this.wheelChange(evt, 1);
}
};
//Uitzoomgevoeligheid
OpenLayers.Control.Navigation.prototype.wheelDown = function (evt) {
this.counter--;
if (this.counter < -2) {
this.counter = 0;
this.wheelChange(evt, -1);
}
};
},

You can set the config attribute maxExtent. Using your existing bounds in your config it would look like this,
maxExtent : new OpenLayers.Bounds(-5037508, -5037508, 5037508, 5037508.34)
you would add this to the map config when you initialise.
you might also want to look at restrictedExtent
Hope this helps

Maybe can help you:
/**
*
* #type {int}
* #constant
*/
var MAX_ZOOM_LEVEL = 6;
/**
* The OpenLayers object that sets the map extent to the Europe scale
* #type {OpenLayers.Bounds}
* #var
*/
var europeGoogleExtent = new OpenLayers.Bounds(-4931105.5677773, 2641663.6973633, 8570731.1060977, 12425603.316113);
Zoom in?
//triggered after a zoom completes
mp.events.register('zoomend', this, checkZoom);
function checkZoom() {
var zoom = mp.getZoom();
if(MAX_ZOOM_LEVEL >= zoom ) {
J('#dialog').html('You reached the maximum zoom level. <strong>The spatial accuracy is of the order of X km.</strong>');
J('#dialog').attr('title', 'Warning message');
J('#dialog').dialog({
height: 140,
modal: true
});
} else {
return true;
}
}
//Loading the initial extent
if (!mp.getCenter()) {
if (document.getElementById('userMapExtent').value != '') {
var sExtent = document.getElementById('userMapExtent').value.split(',');
mp.zoomToExtent(new OpenLayers.Bounds(sExtent[0], sExtent[1], sExtent[2], sExtent[3]), true);
} else {
mp.zoomToExtent(europeGoogleExtent);
}
}

Related

How to hide the numbers on a cluster marker in Google Maps?

So I have this:
But what I want is this:
I'm pretty sure there should be an option I can specify here:
var options = {
gridSize: 80,
imagePath: imagePath ,
someOption : iAmMissing ??
}
var mc = new MarkerClusterer(map, mapmarkers, options);
google.maps.event.addListener(mc, 'clusteringend', function(){
setTimeout(fixMyPageOnce, 1);
});
But I can't seem to find an option. Is this the right place or is there another way I can get rid of the numbers in the circles?
You can just use the "styles" options and set the "textSize" option slightly above 0:
var options = {
gridSize: 80,
styles: [{
url: imagePath,
height: 29,
width: 29,
anchor: [0, 0],
textSize: 0.001
}, {
url: imagePath,
height: 49,
width: 49,
anchor: [0, 0],
textSize: 0.001
}, {
url: imagePath,
width: 65,
height: 65,
anchor: [0, 0],
textSize: 0.001
}]
}
It is working for me.
Just set textColor to transparent
var options = {
textColor: 'transparent',
gridSize: 80,
imagePath: imagePath ,
someOption : iAmMissing ??
}
Create a custom "calculator" function that sets the "text" property of the return value to "".
calculator: function(markers, numStyles) {
var index = 0;
var count = markers.length.toString();
var dv = count;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: "",
index: index,
title: count
};
}
proof of concept fiddle
code snippet:
function initialize() {
var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers.length; i++) {
addMarker(markers[i]);
}
markerCluster = new MarkerClusterer(map, gmarkers, {
imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m',
calculator: function(markers, numStyles) {
var index = 0;
var title = "";
var count = markers.length.toString();
var dv = count;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: "",
index: index,
title: count
};
}
});
}
var gmarkers = [];
var markers = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
var markerCluster;
// Our markers
markers = [
['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];
function addMarker(marker) {
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
var marker = new google.maps.Marker({
title: title,
position: pos,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker1, content) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, content));
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map-canvas {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/#googlemaps/markerclustererplus/dist/index.min.js"></script>
<div id="map-canvas"></div>

Remove DrawingManager from Google maps

I've created a map where I can draw lines in different colors, works just fine, but when I'm trying to remove my drawings it doesn't work very well. I insert all my DrawingManager into an array, and from there trying to remove them. Anyone can help me please?
See the whole project at http://jsfiddle.net/jv8wp4p0/
$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', initGMap);
var gMap;
var drawingMap = [];
var colorIndex = 0;
function initGMap() {
var mapOptions = {
center: new google.maps.LatLng(63.354122, 16.007140),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
};
gMap = new google.maps.Map(document.getElementById('googleMaps'), mapOptions);
}
$.selMapBtn = function (btnObj) {
$(".mapBtn").removeClass('mapBtnSelected');
if ($(btnObj).hasClass('reMap')) {
// Remove last action...
if(drawingMap.length > 0) {
drawingMap[drawingMap.length-1].setMap(null);
}
}
if ($(btnObj).hasClass('clMap')) {
// Remove all actions...
for(i in drawingMap) {
drawingMap[i].setMap(null);
}
}
if ($(btnObj).hasClass('mapPen')) {
$(btnObj).addClass('mapBtnSelected');
penColor = $(btnObj).data('color');
i = drawingMap.length;
drawingMap[i] = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: false,
polylineOptions: {
strokeColor: penColor,
strokeWeight: 5,
clickable: false,
editable: false,
zIndex: 1
}
});
drawingMap[i].setMap(gMap);
}
};
$(".mapBtn").click(function () {
$.selMapBtn($(this));
return false;
});
});
Basically you don't need multiple DrawingManager-instances at all, the options of a DrawingManager may be set dynamically(e.g. the PolylineOptions in your code).
To access the shapes created by the DrawingManager you must store them somewhere(e.g. in an array). Observe the overlaycomplete-event of the DrawingManager, that's the moment when you may access a newly created shape.
$(document).ready(function () {
google.maps.event.addDomListener(window, 'load', initGMap);
var gMap,
drawings = [],
drawingMan,
colorIndex = 0;
function initGMap() {
var mapOptions = {
center: new google.maps.LatLng(63.354122, 16.007140),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
};
gMap = new google.maps.Map(document.getElementById('googleMaps'),
mapOptions);
drawingMan = new google.maps.drawing.DrawingManager({
drawingControl: false
});
google.maps.event.addListener(drawingMan, 'overlaycomplete',
function (shape) {
//push shape onto the array
drawings.push(shape.overlay);
});
}
$.selMapBtn = function (btnObj) {
$(".mapBtn").removeClass('mapBtnSelected');
if ($(btnObj).hasClass('reMap')) {
drawingMan.setDrawingMode(null);
if (drawings.length) {
//remove last shape
drawings.pop().setMap(null);
}
}
if ($(btnObj).hasClass('clMap')) {
drawingMan.setDrawingMode(null);
//remove all shapes
while (drawings.length) {
drawings.pop().setMap(null);
}
}
if ($(btnObj).hasClass('mapPen')) {
$(btnObj).addClass('mapBtnSelected');
penColor = $(btnObj).data('color');
drawingMan.setOptions({
polylineOptions: {
strokeColor: penColor,
strokeWeight: 5,
clickable: false,
editable: false,
zIndex: 1
},
map: gMap,
drawingMode: google.maps.drawing.OverlayType.POLYLINE
});
}
};
$(".mapBtn").click(function () {
$.selMapBtn($(this));
return false;
});
});
http://jsfiddle.net/jv8wp4p0/3/

Zoom doesn't work in 5.0.0 like in version bevor

I habe a problem that the zoom function in the new 5.0.0 version doesn't zoom like bevor.
I have tested the new Version 5.0.0 with the follwing test:
See this jsfiddle.
I change the .jsfile to:
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js
and make the changes for the new scale function:
ui.stage.setScale(newscale); --> ui.stage.setScale({x:newscale,y:newscale});
The error is that the zoompoint in 5.0.0 is the left top corner and not the mousepoint liek bevor.
Any suggestions ?
Just change this if you are using kinetic.jsv5.0.0
You can also view all the changes made in Kinetic.jsv5.0.0
ui.stage.setScale(newscale); --> ui.stage.setScale({x:newscale,y:newscale});
and
ui.stage.setOffset(ui.origin.x,ui.origin.y); --> ui.stage.setOffset({x: ui.origin.x, y: ui.origin.y});
or
Apply the following code:
var ui = {
stage: null,
scale: 1,
zoomFactor: 1.1,
origin: {
x: 0,
y: 0
},
zoom: function(event) {
event.preventDefault();
var evt = event.originalEvent,
mx = evt.clientX - ui.stage.getX(),
my = evt.clientY - ui.stage.getY(),
zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0)),
newscale = ui.scale * zoom;
ui.origin.x = mx / ui.scale + ui.origin.x - mx / newscale;
ui.origin.y = my / ui.scale + ui.origin.y - my / newscale;
ui.stage.setOffset({x: ui.origin.x, y: ui.origin.y});
ui.stage.setScale({x: newscale, y: newscale});
ui.stage.draw();
ui.scale *= zoom;
}
};
$(function() {
var width = $(document).width() - 2,
height = $(document).height() - 5;
var stage = ui.stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
var layer = new Kinetic.Layer();
var box1 = ui.box = new Kinetic.Circle({
x: 50,
y: 50,
radius: 50,
fill: '#00D200',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
var box2 = ui.box = new Kinetic.Circle({
x: 150,
y: 150,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
// add cursor styling
box1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
// add cursor styling
box2.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box2.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box1);
layer.add(box2);
stage.add(layer);
$(stage.content).on('mousewheel', ui.zoom);
});
JSFiddle: http://jsfiddle.net/bijaybhandari1989/6J8F5/4/

Hover on FusionTablesLayer in google maps

I have a FusionTablesLayer on my google map and it works great, but now I have to add a hover to it and I can figure out if it's possible. I've seen examples with a hover on different polygons, but I can't use this.
My layer:
layer = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
heatmap: { enabled: false },
query: {
select: "col0",
from: key,
where: CreateQuery(shownMunicipalities)
},
styles: [{
polygonOptions: {
fillColor: '#eeeeee',
fillOpacity: 0.5,
strokeColor: '#000000',
strokeOpacity: 0.2,
strokeWeight: 2
}
}, {
where: CreateQuery(activeMunicipalities),
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}
}],
options: {
styleId: 2,
templateId: 2
}
});
I've tried add a listener of the mouseover event, but this doesn't seem to do anythin.
google.maps.event.addListener(layer, 'mouseover', function (event) {
alert('hover');
});
Am I trying to do the impossible?
FusionTablesLayers don't support mouseover events, only click events.
(see this enhancement request)
There are implementations that add mouseover support (fusiontips) and this example from the FusionTables documentation.
code snippet (example from documentation):
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var randomnumber = Math.floor(Math.random() * 4);
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[randomnumber],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: colors[randomnumber],
fillOpacity: 0.3
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({
fillOpacity: 1
});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({
fillOpacity: 0.3
});
});
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
height: 500px;
width: 600px;
}
<script src="https://maps.google.com/maps/api/js"></script>
<div id="map-canvas"></div>

Disable GPS after enabling it

I have this code to enable the GPS on the unit.
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
displayPosition,
displayError,
{ enableHighAccuracy: true, maximumAge: 0 }
);
} else {
alert('Geolocation is not supported by this browser');
}
function displayPosition(position) {
var dc_latlong = new google.maps.LatLng(position.coords.latitude.toFixed(6), position.coords.longitude.toFixed(6));
var gps_accuracy = position.coords.accuracy;
var dc_options = {
minZoom: 4,
maxZoom: 20,
center: dc_latlong,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
var dc_map = new google.maps.Map(document.getElementById('google-maps-distance'), dc_options);
var dc_marker = new google.maps.Marker({
position: dc_latlong,
draggable: false,
map: dc_map
});
var dc_circle = new google.maps.Circle({
center: dc_latlong,
radius: gps_accuracy,
map: dc_map,
fillColor: '#3333ff',
fillOpacity: 0.2,
strokeColor: '#3333ff',
strokeOpacity: 0.5,
strokeWeight: 1
});
google.maps.event.trigger(dc_map, 'resize');
dc_map.fitBounds(dc_circle.getBounds());
$('#gps-information').show();
$('#gps-accuracy').html(number_format(gps_accuracy) + ' meters');
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert('Error: ' + errors[error.code]);
}
I wonder now how to disable the GPS on the unit so the website doesn't keep getting visitors position?
Thanks in advance.