I've 1 annotation inside the map to select a place , after drag and drop the annotation i should take the new annotation lang,lat , however after drag and drop the annotation the lang , lat still show the old credentials .
i am not able to get new annotation credentials , any idea ?
var MapModule = require('ti.map');
var mapView = MapModule.createView({
mapType : MapModule.TERRAIN_TYPE,
height : '50%',
width : Ti.UI.FILL,
top : 1,
zoom : 12,
region : {
latitude : 33.373296399867975,
longitude : 44.35598730468746,
latitudeDelta : 0.6,
longitudeDelta : 0.6
},
userLocation : true,
animate : true,
annotations : []
});
win.add(mapView);
annotation = MapModule.createAnnotation({
latitude : dalel.latitude,
longitude : dalel.longitude,
title : L('long_press_then_move'),
subtitle : L('drag_drop_anotion'),
draggable : true,
});
mapView.annotations = [annotation];
and here how i get lang lat of the annotation :
data.longitude = mapView.annotations[0].longitude;
data.latitude = mapView.annotations[0].latitude;
I never got exactly that to work :-(
Instead I implemented a "long click" event to set the annotation in a new place and remove the old one. And it actually turns out that this is better also from the user's perspective as it can sometimes be difficult to drag the annotation - especially if you need to drag it near the edges of the visible map or even beyond.
So I suggest you consider that option. Whether it will work for you is obviously dependent on the functionality of your app.
/John
To receive the new location of the dragged pin listen to the pinchangedragstate event of the Map View.
Related
I am trying to change an OpenLayers 2 call to Leaflet, but when I do the map is displayed fine at zoom level 0, but every time I zoom in, the map doubles from the previous number. Any suggestions as to why? Here is a picture to what its doing.
OpenLayers 2 map options
var options = {
projection: new OpenLayers.Projection("EPSG:3857"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
controls: [
new OpenLayers.Control.Navigation(
{dragPanOptions: {enableKinetic: true}}
)
]
};
OpenLayers 2 code
var bathyEsri = new OpenLayers.Layer.XYZ(
' ESRI Ocean'
,'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg'
,{
sphericalMercator : true
,isBaseLayer : true
,wrapDateLine : true
,opacity : 1
,visibility : true
}
);
Leaflet Options
var options = {
worldCopyJump: true,
maxBounds: L.LatLngBounds([20037508.34,20037508.34],[-20037508.34,-20037508.34]),
crs: L.CRS.EPSG4326,
center: [39.73, -104.99],
zoom: 0
};
Leaflet Code
var bathyEsri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg');
Your problem is basically a typo.
Your analysis is also misleading: it's not that the map is being "duplicated", but rather every tile being requested is the 0/0/0 tile. If you use the network inspection tools of your browser, you'll see that the tile URL is something like https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/$3/$4/$5.jpg , but the tile image corresponds to the /0/0/0.jpg tile.
If you look at those URLs a bit more closely, you'll notice some "extra" $ signs. Why are those there? Well, consider that you wrote your tilelayer URL scheme as
var bathyEsri = L.tileLayer('http://...../tile/${z}/${y}/${x}.jpg');
But keep in mind that the Leaflet documentation clearly states:
var bathyEsri = L.tileLayer('http://...../tile/{z}/{y}/{x}.jpg');
Change this, and everything will magically start working.
I'm having some troubles trying to display 2 different markers placed at exactly the same coordinates.
The case is: we are displaying stores, and some of them are placed at the same building (ie. a mall), so, they are different stores but shares the same ubication/coordinates.
Our json source content looks like this:
{
"properties" : {
"id" : "1",
"name" : "Store 1"
},
"geometry" : {
"coordinates" : [-70.66667, -33.45],
"type" : "Point"
}
},
{
"properties" : {
"id" : "2",
"name" : "Store 2"
},
"geometry" : {
"coordinates" : [-70.66667, -33.45],
"type" : "Point"
}
}
The thing is, just one of them gets displayed.
My question is, is there an out of the box solution for this use-case? Or should we implement our own solution ?
Thanks in advance!
If you are using the Marker class from mapbox-gl, you can just apply standard CSS transform to offset the marker.
Another solution would be something refered to as "spider marker":
https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html
https://github.com/bewithjonam/mapboxgl-spiderifier
One solution is setting an offset to the markers with same coordinates. This will put markers with same coordinates at the same height next to each other:
for (const marker of markers) {
// get all markers with the same coordinates
const sameMarkers = markers.filter(m => m.lat === marker.lat && m.lon === marker.lon);
// if there is more than one marker with the same coordinates
if (sameMarkers.length > 1) {
// get the index of the current marker
const index = sameMarkers.indexOf(marker);
// calculate the offset for the current marker
const offset = 32 * (index - (sameMarkers.length - 1) / 2);
// set the offset
marker.setOffset([offset, 0]);
}
}
I'm using leaflet for my project and I want to use filter marker in it. To do it, I will setOpacity to 0 for all markers and re setOpacity to 1 for my targets. I know leaflet allow to setOpacity for each market but can I set all markers at the same time?
Thanks for your help!
There are many ways to achieve that
In leaftlet
Create a layer group and add each marker to this group :
var myGroup = L.layerGroup([mark1, mark2, ...]);
You can add the entire group to the map.
Then, when you want to set marker opacity to 0 do :
myGroup.eachLayer(function(layer) {
layer.setOpacity(0);
});
A little jsfiddle example here :
https://jsfiddle.net/csblo/64phqLb7/4/
In pure javascript
Store all your markers in an array. First create an array :
var allMarkers = [];
And when you create a new marker push it in this array :
var marker = L.marker(...);
allMarkers.push(marker);
Then, when you have to set opacity to 0 :
allMarkers.forEach(function(marker) {
marker.setOpacity(0);
});
Is there any way we can enable highcharts to display marker value at all the times ?
I got it working. Posting for reference of others
plotOptions : {
line : {
dataLabels : {
enabled : true,
formatter : function() {
return this.y + '%';
}
}
},
series : {
name : 'Team Briefing',
shadow : false,
marker : {
lineWidth : 2,
radius : 6,
symbol : 'circle'
}
}
},
Check the Point Marker reference guide. What I remember about Highcharts is that still it does not provide anything such as.
when you initiate the chart with an object (as your first argument) : ' ...new Highcharts.Chart( { ... } )'
one of this object properties you can use is the plotOptions.series.marker
this marker is an object itself:
marker:{
enabled:true,
lineWith:0.0,
radius:0.0,
// more attributes...
}
those are the default setting. meaning: It is enabled by default, but the radius is also zero by default, and that is the reson you don't see the points .
make a long story short: you need to set the raduis (to be bigger than zero)
read more at http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
I am creating an Application that consist of a Panel,
This panel contains a Tab-Panel and a Form-Panel. (Initially, Form-Panel is Hidden)
The Tab-Panel has a Tab, which contains a List.
When Tapped on a List-Item it dose the following
Shows the Form-Panel
Hides the Tab-Panel
My Problem is When it does so , The form do not show any scroll bars, How ever when i change the orientation of the device(iPhone) and then it allows me to scroll.
Can anyone explain me if i am doing it correctly, or is there any better way to achieve this functionality, or can the Main Panle be changed with a view Port ?
A small example will be really great.
Below is my Code (i will try to keep it simple)
Decleration of List and Event Listener
var lstRequestTracker = new Ext.List({
itemTpl : '{emplFirstName} {emplLastName}'
,store : storeRequestTracker
,fullscreen: true
});
lstRequestTracker.on('itemtap', function( oThis, index, item, event) {
var rec = oThis.getStore().getAt(index);
tpnlMyForms.hide();
fpnlOnBoard.show();
//pnlMain.doComponentLayout();
fpnlOnBoard.doComponentLayout();
});
Code for declaring the Main-Panel, Tab-Panel and The Form-Panel
var tpnlMyForms = new Ext.TabPanel({
tabBar : {dock : 'bottom', layout:'hbox'}
,fullscreen : true
,defaults : {scroll: 'vertical', layout:'fit'}
,items : [ {
title : 'Request Tracker'
,items : [lstRequestTracker]
,iconCls: 'time'
}
]
});
var fpnlOnBoard = new Ext.form.FormPanel({Contains form Fields});
Ext.setup({
onReady: function() {
var pnlMain = new Ext.Panel({
fullscreen : true
,dockedItems: [{dock:'top', xtype:'toolbar',title:'STARS'}]
,layout: 'fit'
,items : [tpnlMyForms,fpnlOnBoard]
});
fpnlOnBoard.hide();
}// eo onReady Function
});
Have you tried giving your formPanel a scroll option (scoll: 'horizontal') ? I really don't know wether this will help, but I remember I also had a form a few days ago and this was the solution. That had nothing to do with the device orientation by the way, but who knows..