I think I really should be posting new question instead of responding to a closed post.
Here I have two tabs for 2 maps. One is hiden. They both start blank and identical so I use gmap3 selector to initialize both maps in one shot. clicking on the tabs would bring up corresponding map without reinitializing. Thanks to Philar and MattBall, using resize fixed one display problem. However, the map that is initially hidden is off center and at a different zoom level. No clue why. Anyone have any idea? Here is the code.
function initmap() {
// setup map and basic overlay
$('.gmap').gmap3(
{ action: 'init',
options: {
zoom: DefaultZoom,
minZoom: DefaultMinZoom,
center: mapcenter,
mapTypeId: google.maps.MapTypeId.TERRAIN,
scrollwheel: false,
rotateControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
style: "SMALL"
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
style: "SMALL"
},
streetViewControl: false,
heading: 90
}
},
{ action: 'addGroundOverlay',
url: '../maps/assets/sectors_color.png',
bounds: [
[49.313821, -123.022082],
[49.199900, -123.264825]
],
tag: 'SectorMapOverlay'
}
);
map1 = $(mapID1).gmap3('get');
map2 = $(mapID2).gmap3('get');
$("#switchmap").click(function () {google.maps.event.trigger(map1, 'resize')});
$("#switchmap2").click(function () {google.maps.event.trigger(map2, 'resize')});
}
Or you can do it manually:
map = $("#foo-map").gmap3('get');
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
map.panToBounds(map.getBounds());
Related
I am trying to create a chart somehow similar to expertoptions' by using Highcharts, however I can't find solution to adding a custom marker to the line, I have tried doing something like:
var myCircle = myChart.renderer.circle(x,y,20).attr({
fill: '#d3d7de'
}).add(circlePointGroup);
var circlePointGroup = myChart.xAxis[0].renderer.g().attr({
translateX: 2000,
translateY: 2000
}).add();
but ended up being a floating static shape, I have here the fiddle, Any help would be appreciated. I have hard time reading their documentation :/
I think that a better approach might be adding this point as a scatter series - that keeps the point in the move while adding new points to the main series. Using renderer.circle renders circle in a static position.
Demo: https://jsfiddle.net/BlackLabel/Lpfj4stx/
var betWindowInterval = setInterval(function() {
myChart.xAxis[0].removePlotLine('markerLineX');
myChart.yAxis[0].removePlotLine('markerLineY');
myChart.series.forEach(s => {
if (s.options.id === 'customPoint') {
s.remove();
}
})
clearInterval(betWindowInterval)
}, 2000);
myChart.addSeries({
type: 'scatter',
data: [{x: lastPointY.x, y: lastPointY.y}],
id: 'customPoint',
marker: {
fillColor: 'red',
radius: 5,
symbol: 'circle'
}
})
API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
I am using OpenLayers 3.10.1 and the following code:
map.on('click', function (map, evt) {
var mouseCoords = [evt.originalEvent.offsetX, evt.originalEvent.offsetY];
alert(mouseCoords);
});
When I click as near as I can to the upper left corner of the map in IE or Chrome, I get an alert with the mouse coordinates offset from the top left corner of the map div, i.e. something sensible like [3,4].
But when I try the same things I get the mouse coordinates relative to the browser window and not the map div. Does anyone know why this is? Am I using an outdated way to find the mouse coordinates (ultimately so I can calculate which feature was clicked)?
Some alternatives:
map.on('click', function(evt){
console.info(evt.pixel);
console.info(map.getPixelFromCoordinate(evt.coordinate));
});
The following code works for me (openlayer 4.4, angular 4+)
_initMap() {
console.info("_initMap");
this.mapW = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'myMapDiv',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([this.lon, this.lat]);,
zoom: 12
})
});
const theMap = this.mapW;
// display on click
this.mapW.on('click', function(evt) {
/* // you want to detect feature click
var feature = theMap.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var fname = feature.getProperties().name;
console.info("feature clicked:" + fname);
return;
}
*/
console.info(evt.coordinate);
console.info(ol.proj.toLonLat(evt.coordinate)); // <=== coordinate projection
});
JS console results (when clicking close to Grenoble in France):
(2) [637000.3050167585, 5652336.68427412]
(2) [5.722271099853512, 45.19540527485873]
I've got a vector layer with a GeoJSON source, consisting of Points and a LineString. When I click on a point I want to open a popup with additional information.
Here's some code:
var style = {
'Point': [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgb(255,0,0)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: '#000000',
width: 1
}),
})
})],
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 3
})
})],
'MultiLineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 3
})
})]
};
var map = new ol.Map({
target: 'map-ol-canvas',
interactions: ol.interaction.defaults({mouseWheelZoom: false}),
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({
zoom: 8,
maxZoom: 16
})
});
map.getView().fit(extent, map.getSize());
var trackSource = new ol.source.Vector({
url: '/test.geojson',
format: new ol.format.GeoJSON()
});
var track = new ol.layer.Vector({
source: trackSource,
style: function(feature, resolution) {
return style[feature.getGeometry().getType()];
}
});
map.addLayer(track);
var select = new ol.interaction.Select({
filter: function (feature, layer) {
return feature.getGeometry().getType() === 'Point';
}
});
map.addInteraction(select);
// When user clicks on a waypoint, show a tooltip.
function onMouseClick(browserEvent) {
var coordinate = browserEvent.coordinate;
var pixel = map.getPixelFromCoordinate(coordinate);
map.forEachFeatureAtPixel(pixel, function(feature) {
if (feature.getGeometry().getType() === 'Point') {
console.log(feature.get('date'));
}
});
}
map.on('click', onMouseClick);
The problem:
When I click directly on a point nothing happens. When I click a couple of pixels below and a bit right or left (depends on zoom level!), the point gets selected and the console.log is triggered.
I can fix this by using Firebox WebDeveloper Addon and activating "Disable all styles".
However, when I manually remove all CSS one by one that behavior never goes away.
In the first place I thought this might be some inherited padding or margin, but currently I think the canvas shouldn't be affected by any CSS at all.
Any ideas about what could be wrong?
I'm experiencing the same issue. It appears to be linked to navigating to the page from a specific modal (I'm using ajax hash paging). The footer doesn't load and after I interact with the first feature on the map the following happens;
The map jumps and stretches/smears slightly
The footer shows up on my page
The vertical scroll bar appears
The issue doesn't seem to occur when i link from another page.
I have the same problem.Here are some advices may help you:
check the the size of map's container(may be a Div).
check the size of map(openlayers's map object).
compare that two size to confirm whether the two size are equal.
if not, you can use the map.setSize([width,height])to adjust the map's size.
I'm making an animated map showing a series of points using Mapbox.js. Ideally, I want to smoothly switch focus between points by combining zoom and pan like this example created in d3.js. I wonder if there is anyway to control the pan & zoom animation speed (mainly to slow it down). In the code below, I've tried both setView() and panTo() functions and the transition is too fast. Any suggestion will be highly appreciated, thanks!
L.mapbox.accessToken = "#Token Here";
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([34.01, -118.48], 5, {
pan: { animate: true },
zoom: { animate: true }
});
map.setView([33.98, -118.42], 5);
Take a look at this fiddle.
You can use a function like:
function jumpTo(index){
map.setView(positions[index], 4, {
pan: {
animate: true,
duration: 2
},
zoom: {
animate: true
}
});
}
And control it on moveend event.
Could really do with some help, I'm trying to push an alert on an android phone with the help of sencha when a user is near a certain set point of interest.
In my view I have a map
{
xtype: 'map',
id: 'mapOne',
cls: 'center',
flex: 1,
width: '100%',
mapOptions : {
mapTypeControl : false,
navigationControl : true,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 10,
draggable: true,
keyboardShortcuts: true,
scrollwheel: false,
enableHighAccuracy: true
},
listeners : {
maprender : function(comp, map){
var currentMarker = new google.maps.Marker({
position: new google.maps.LatLng(setlat,setlon),
//title : 'Sencha HQ',
map: map,
icon: image
});
setTimeout( function(){map.panTo (new google.maps.LatLng(markerlat, markerlong));} , 1);
}
}
In my controller I set the following before my map is rendered
var poi = new google.maps.LatLng(markerlat, markerlong);
Then in my controller im initalizing a geolocation object as follows
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
frequency :3000,//every 3 seconds
listeners: {
locationupdate: function(geo) {
var curlat = geo.position.coords.latitude;
var curlong = geo.position.coords.longitude;
console.log('New GEO CURRENT: ' + curlat + ' ' + curlong);
var me = new google.maps.LatLng(curlat, curlong);
if (me == poi){
alert("poi found");
}
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});
I have also set a geomarker to see if I being detected anyway near the poi.
GeoMarker = new GeolocationMarker(mapOne);
It shows my GeoMarker directly on top of the marker with no alert. I tried a few different similar things with no success like the following....
if (GeoMarker == poi){
alert("poi found");
}
I know my process is wrong here in both cases as my position won't be exactly the same as the poi but I can't figure out how to set the proper proximity of the current position to to alert. I'm finding it hard to find any documentation that shows how to successfully implement something similar with respect to alerting at a poi. Any help or links to documentation that might help would be greatly appreciated.
Thanks in advance
I first got successful results through using 'if' statements to check if the difference between the latitude and longitude values of both points were less than a set variable. But I thought there must be a more efficient method of implementing this through some form of radius around the current location.
Finally came across this thread.... Calculate distance between two points in google maps V3 and as it suggested in one of the answers I used the following with success......
google.maps.geometry.spherical.computeDistanceBetween (latLngA, latLngB);
to check if the distance between both points was less than my desired distance. Hope this helps someone in the future.
Any information from anyone to alternative methods for carry out the same would be welcomed though.