Map component for ExtJS - extjs

Is there are a ExtJS component, which allows to
display an OpenStreetMap map in an ExtJS application,
display markers on certain positions on the map and
react to user's clicks on certain positions on the map
?

No.
There's only an extension for GMap: Ext.ux.GMapPanel and GMap Example
Both GMap and OSM have their own API. You can just wrap them into containers such as panels, windows, etc. If you wanna handle OSM and GMap events, use their API.

Not a core component of Ext JS but what about GeoExt, which extends Ext JS? It integrates OpenLayers, which provides all the map service and user interface controls to do all the hard map work.

Related

How to add pop up to WMS Layer in react- leaflet

I use react-leaflet to display WMS Layer
<WMSTileLayer url="http://localhost:8080/geoserver/cite/wms?service=WMS" {...mapprops2} ></WMSTileLayer>
I use geoserver url to get the data, but how exactly should I pass user click(lat,long or X and Y) to this link and fetch data?
http://localhost:8080/geoserver/cite/wms?service=WMS&version=1.1.0&request=GetFeatureInfo&layers=cite%3Acar&QUERY_LAYERS=cite%3Acar&bbox=-3.2503604888916%2C51.4469833374023%2C-3.16548633575439%2C51.5405578613281&width=696&height=768&srs=EPSG%3A4326&format=application/json&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&STYLES=&WIDTH=101&HEIGHT=101
How do I add pop up using getFeatureInfo based on user click on this layer?
Is there something like latLngToLayerPoint in react-leaflet too?
You can add a new WFS for your tooltip positions. Add an overlay layer top of the WMS Tile Layer in react-leaflet.
Use latLngToContainerPoint in react leaflet

React Native Maps LocalTile with fallback to native map provider tiles

I'm using react native maps with the <LocalTile /> component to render custom maps in a react-native app.
This is all good and it's working but the tiles I'm using just cover a limited area and what I'm wondering is; is there a way to make react-native-maps fallback to use the native provider tiles when tiles defined with pathTemplate are not available? This seems only to be an issue on iOS because Android renders the google maps tiles behind the local tiles - this is the behaviour I'd like for iOS with apple maps as well.
Essentially I want to be able to render the custom map tiles that I have, and then have it fallback to the standard map for everything else.
const pathTemplate = `${RNFS.DocumentDirectoryPath}/map-tiles/{z}/{x}/{y}.png`;
......
<MapView>
<LocalTile pathTemplate={pathTemplate} tileSize={256} />
</MapView>
Currently on iOS it just renders empty space with labels where the local tile set is not covered.
edge of local map tiles region

Custom marker with Angular Google Maps

I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer

Qt5/QML Displaying a custom route on a map

What would be the best way to draw a custom route on a QML Map with a set of given coordinates?
Basically, all I need is that the map highlights the path along the road and does not go straight to each point.
No animations needed either.
Edit:
I need it to be in a desktop application.
One option is to display a HTML website using Leaflet or OpenLayers. Both support displaying a GPX track. The track can be obtained by using one of the various online routers for OSM.

Facebook Canvas App using Angular JS

I want to create an application on Facebook and I will host it on our server to be used from Facebook Canvas.
I was thinking of creating the web app with Angular.JS but one of my friends told me that my web app must be drawn inside a <canvas> html tag or I will not have the full functionality of Facebook integration.
So this is my question, do I have to draw my elements inside a <canvas>? or I can use other html tags with some basic animation?
No, you do NOT need to use HTML5 Canvas. There are "Canvas Apps", but there is no relation to HTML5 Canvas. Please check out the docs for more information: https://developers.facebook.com/docs
There are only a few things that are not possible without a Canvas App. For example, you can only use Notifications with a Canvas App, or you can only use invitable_friends in a gane with Canvas implementation. DonĀ“t worry about those before reading the docs.

Resources