I am attempting to use Leaflet with Leaflet Vector Layers (http://geojason.info/leaflet-vector-layers/) and ArcGIS Server. I've set up the popup template and I can view the features as expected. But, when I click on a feature to get information I receive an error: 'cannot read property 'y' of undefined.' Any suggestions would be greatly appreciated. The code I use to create the layer in question is below:
lyrHospitals = new lvector.AGS({
url: oHospitals.url + '/' + oHospitals.layerIds,
fields: '*',
//uniqueField: "onemap_prod.SDEADMIN.hls.OBJECTID",
popupTemplate: function (properties) {
return '<p>hello there</p>';
},
scaleRange: [10, 20],
symbology: {
type: 'single',
vectorOptions: {
icon: baseballIcon
}
},
singlePopup: true
});
I just updated Leaflet Vector Layers to work with Leaflet v0.4.x. Can you try with the latest Leaflet Vector Layers and let me know if you're still having this issue?
Related
I have a question which is a mix of both composition API and options API
What I want to do: I want to watch an object. That object is deeply nested with all kinds of data types.
Whenever any of the nested properties inside change, I want the watch to be triggered.
(This can be done using the deep: true option).
AND I want to be able to see the previous value and current value of the object.
(this doesn't seem to be possible because Vue stores the references of the objects, so, now the value and prevValue point to the same thing.)
In Vue3 docs, for the watch API, it says this
However, watching a reactive object or array will always return a reference to the
current value of that object for both the current and previous value of the state.
To fully watch deeply nested objects and arrays, a deep copy of values may be required.
This can be achieved with a utility such as lodash.cloneDeep
And this following example is given
import _ from 'lodash'
const state = reactive({
id: 1,
attributes: {
name: ''
}
})
watch(
() => _.cloneDeep(state),
(state, prevState) => {
console.log(state.attributes.name, prevState.attributes.name)
}
)
state.attributes.name = 'Alex' // Logs: "Alex" ""
Link to docs here - https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-reactive-objects
However, this is composition API (if I'm not wrong).
How do I use this way of using cloneDeep in a watch defined in options API?
As an example, this is my code
watch: {
items: {
handler(value, prevValue) {
// check if value and prevValue are STRUCTURALLY EQUAL
let isEqual = this.checkIfStructurallyEqual(value, prevValue)
if (isEqual) return
else this.doSomething()
},
deep: true,
},
}
I'm using Vue 3 with Options API.
How would I go about doing this in Options API?
Any help would be appreciated! If there's another way of doing this then please do let me know!
I also asked this question on the Vue forums and it was answered.
We can use the same syntax as provided in the docs in Options API using this.$watch()
data() {
id: 1,
attributes: {
name: ''
}
}
this.$watch(
() => _.cloneDeep(this.attributes),
(state, prevState) => {
console.log(state.name, prevState.name)
}
)
this.attributes.name = 'Alex' // Logs: "Alex" ""
Im implementing a flutter app to display polylines by flutter google maps plugin, But It only shows a straight line between those two points rather than showing actual route, I'm not quite sure what needed to do.
Here my add markers function
void addMarker() {
latlng.add(LatLng(5.973804, 80.429838));
allMarkers.add(Marker(
markerId: MarkerId('busLoc'),
draggable: true,
onTap: () {
print('Marker Tapped');
},
position: LatLng(5.973804, 80.429838),
));
_polyline.add(Polyline(
color: Colors.blue,
visible: true,
points: latlng,
polylineId: PolylineId("distance"),
));
Here my scaffold
GoogleMap(
polylines: _polyline,
markers: Set.from(allMarkers),
initialCameraPosition:
CameraPosition(target: LatLng(widget.la, widget.l0), zoom: 14),
mapType: MapType.normal,
),
And I'll attach screenshot below as well
To get the route from point A to point B you will need to use Directions API that is available on the google_maps_webservice flutter package, which is a service from Google Maps Platform that gives the route information
One of the route information is the overview_polyline that holds an encoded polyline representation of the route.
You can get the overview_polyline by having a function that sends request to Directions API using the google_maps_webservice package like this:
import 'package:google_maps_webservice/directions.dart' as directions;
final _directions = new directions.GoogleMapsDirections(apiKey: "YOUR_API_KEY");
var overviewPolylines;
directions.DirectionsResponse dResponse = await _directions.directionsWithAddress(
_originAddress,
_destinationAddress,
);
if (dResponse.isOkay) {
for (var r in dResponse.routes) {
overviewPolylines = r.overviewPolyline.points
}
}
Then, once you get the overview_polyline from Directions API using the sample code above, you will need to decode it using the PolyUtil(); method from the google_maps_util flutter package like this:
import 'package:google_maps_util/google_maps_util.dart';
PolyUtil myPoints = PolyUtil();
var pointArray = myPoints.decode(overviewPolylines);
Once decoded you can pass the pointArray to your polyline object like this:
_polyline.add(Polyline(
color: Colors.blue,
visible: true,
points: pointArray,
polylineId: PolylineId("distance"),
));
it shows straight line because you have in your polyline only two points, so the expected behavior is to draw a line from one point to the other
you have to use google direction API here is an article explains how to draw route between two points in flutter.
https://medium.com/flutter-community/drawing-route-lines-on-google-maps-between-two-locations-in-flutter-4d351733ccbe
I want ask you to one thing about interactive map and geo service. I need to get altitude from my coordinations points and build graph of elevation.
In google maps it looks like this:
https://developers.google.com/maps/documentation/javascript/examples/elevation-paths
I didn't found any example for this. How can I solve this problematic?
Thank you very much.
Best regards Petr Tomasek
You can build a similar elevation graph via the HERE RoutingService JS API by specifying the value of returnelevation of the routeRequestParams to true like in this snippet:
var router = platform.getRoutingService();
var routeRequestParams = {
mode: 'fastest;car',
representation: 'display',
waypoint0: '{lat, lng}', // Start of route
waypoint1: '{lat, lng}', // End of route
returnelevation: true
};
var onResult = function(result) {
var route = result.response.route[0];
/* Now, altitudes are the third values of the each shape point.
Note: Shape points returned as strings. */
var elevation_list = route.shape.map(x => parseFloat(x.split(",")[2]));
/* Now you can use the elevation_list as input data to
draw your elevation graph with any graph tool
*/
};
var onError = function(error) {
console.log(error);
};
router.calculateRoute(
routeRequestParams,
onResult,
onError
);
With the elevation values you can draw your elevation graph with any JS graph library.
Checkout the routing API: https://developer.here.com/documentation/maps/topics/routing.html
i use fullcalendar and want to send the year of the selected view (not the current view) to the page "ajax_load_projektkalender.php".
The following try results in an error:
events: {
url: 'ajax_load_projektkalender.php',
type: 'POST',
data: function() { // a function that returns an object
return {
projekte_key: $('#projekte_key').val(),
aufgaben_key: $('#aufgaben_key').val(),
sel_year: $('#calendar').fullCalendar('getView').start.format('Y'),
urlaub_key: $('#urlaub_key').val(),
termine_key: $('#termine_key').val()+'',
gruppiert_key: $('#gruppiert_key').val(),
bdauer_key: $('#bdauer_key').val()
};
},
error: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
Error: TypeError: $(...).fullCalendar(...).start is null
[Weitere Informationen]
I' m helpless... can anybody give me advice ?
Daniel
You have a bootstrap problem: you define the events of your calendar by referencing the current view, but that will be empty until you have defined the events of your calendar... To break the loop, assuming that initially you want to display the current year, you could write something like:
data: function() {
var current = $('#calendar').fullCalendar('getView').intervalStart
var y = (current?current:moment()).format('Y')
return {
...
sel_year: y,
...
}
I am not sure what you are trying to do, but actually I suspect you don't need that at all, as fullcalendar automatically adds to the ajax request to your php server a parameter "start" holding the start date of the period to display in ISO format (and similarly an "end" parameter). You can even give an alternative names to your parameters using e.g.
startParam: 'Anfang'
in your calendar objet.
Try intervalStart instead of start. That should fix the error, but I am not sure it solves your problem.
I used to make GML vector like this:
layer = new OpenLayers.Layer.GML("based",
"./parser2.php",
{
isBaseLayer: true,
format: OpenLayers.Format.GeoJSON,
styleMap: new OpenLayers.StyleMap(mystyle),
units:"m",
maxResolution: 0.2,
minResolution: 0.01
})
map.addLayer(layer);
but is now depreciated an for multiple raison i need to use OpenLayers.Layer.Vector but i can't succed to read a geoJon file.
I tried like this:
var test = new OpenLayers.Layer.Vector("test", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
isBaseLayer: true,
url: "data.json",
styleMap: myStyles,
format: new OpenLayers.Format.JSON()
})
});
map.addLayer(test);
but unfortunately it's not working.
do you have any clue?
Thanks
I use the steps described in the following web page to add GeoJSON format data to a layer: http://thinkwhere.wordpress.com/2011/06/26/geocommons-geojson-in-openlayers/
As your GeoJSON is already correct format do not add {"type": "FeatureCollection", "features": ...} around the GeoJSON string, as shown in this example.
In plain English, the steps are:
Create a new OpenLayers.Layer.Vector layer without options to read data.
You read the URL yourself.
In the callback function called when reading is complete you create a OpenLayers.Format.GeoJSON() object, use it to read features from the GeoJSON string, then add the features to the layer.