I am working with the ScalaJS library
https://github.com/fancellu/scalajs-leaflet and I am looking to incorporate some custom javascript from https://jackzoushao.github.io/leaflet-marker-direction
The key functionality is the ability to rotate the markers based on the direction of travel.
Any tips on how to achieve this will be greatly appreciated.
Look at
https://github.com/fancellu/scalajs-leaflet/blob/master/core/src/main/scala/com/felstar/scalajs/leaflet/Leaflet.scala
Note the Marker, they create an AngleMarker
Try creating appropriae AngleMarker scala code, and pull in the js
Also look at how I pulled in some GeoJSON.js object
https://github.com/fancellu/scalajs-leaflet/commit/1ebbbdc40ef8cdde7aee362864b5f2812d9be5b6
Related
I want to warp 'leaflet-geosearch' to work in a react.js application that uses leaflet-geosearch. Is this possible?
Any examples of this would be extremely useful.
You'd have to write a custom react-leaflet component to do this.
I'd like to generate a link to a Mapbox map, centered on a particular latitude and longitude, that also contains a marker on that spot. This is trivial when generating a static map:
https://api.mapbox.com/v4/mapbox.streets/pin-m(<lat>,<lon>)/<lat>,<lon>,<zoom>/320x160.png?access_token=<access token>
with the pin-m() segment specifying the marker. When generating a link to a full, interactive (zoomable/pannable) map, however, specifying a marker doesn't seem to be an option. This URL goes to the map I want:
https://api.mapbox.com/v4/mapbox.streets/zoompan.html?access_token=<access token>#<zoom>/<lat>/<lon>
but there's no marker. I looked through all the documentation and couldn't find any reference to a way to do this. From the docs it looks like the only way to add a marker to the map is to host a page and generate the map via JS in a script. I can do this, but I'd much prefer to be able to just add a parameter to a URL instead of adding a whole new route/controller/view/associated specs for our Rails app for what seems to me to be a very minor addition.
Does anybody know of an undocumented way to do this? Or a documented way that I've just overlooked?
You aren't able to add a marker through a url parameter like the static API allows. You could add a marker by following this example for Mapbox JS or you could use the newer Mapbox GL JS to center the map around a marker like in this example.
I Hope this helps
I am actually looking for a way to customize my window popups like it is done on this website : http://www.nytimes.com/newsgraphics/2013/quiet/#/map/
I have been looking on all the web and no way to find it ...
Any ideas or website explaining it ?
Thanks guys
The javascript code uses a combination of JQuery, JQueryUI, qTip2, and a couple of other libraries for localization and media player abilities.
You can find the specific javascript code for those markers here: NYTimes Map - zoom.js
All the css is found here: NYTimes Map - quiet.css
The main tool used for the mouseover parts is qTip2. Tutorials and demos can be found on the website. That's probably the thing you're going to want to start with.
There is a Leaflet extention called Leaflet.Rrose. Description from Leaflet plugins page:
For use when you want popups on mouseover, not click, and you need popup tips to reorient as you get close to the edges of your map.
Check out examples on extensions' page.
I am very new to web based programming and have started with HTML5 from this week.
I have create a bunch of flow-chart diagrams on first canvas-1 programmatically by javascript and by using addflow (Lassange) HTML5 controls. Now I have another canvas-2 at its side on which I want the user to pick any given UI-control (from canvas-1) and drag-and-drop the same on canvas-2. BUT I am unable to achieve this.
I tried assigning draggable property to the programmatically created ui-control (canvas-1) and also made the canvas-1 draggable etc but I think this approach will not work. The UI-control does get dragged but ONLY within the boundaries of canvas-1. Now how do I ensure that an user can be able to do this... what should be my javascript coding approach at the html-page-behind?.
EDIT: Somebody who is acquainted with Lassalle's technologies -- 'AddFlow' HTML5 jscript component can be of more help here because I am using that HTML5 control to create two canvas and for filling the set of UI-controls as a 'pallet' into the canvas-1. But if somebody has achieved this through some native HTML5 javascripting or alike then still do reply.
I am using RCP and ZEST to create an application to visualize graphs. My question is: is it possible to zoom a graph drawn on ZEST (any ZEST or RCP api or plug-in)?
Thanks in advance
-rajit
I had a look at the ZestZoomContributionViewItem and it seems to put a drop down list specifying "page width" and 200% options for zoom. I wanted to be able to use the mouse wheel to zoom in and out of my graph.
The following code will zet the zoom level to 500% on your Zest graph and give you fine grain control (it's a bit deprecated as these are internal eclipse classes.)
Graph myGraph = new Graph(parent, SWT.NONE);
ZoomManager zoomManager = new ZoomManager(
graph.getRootLayer(),
graph.getViewport() );
zoomManager.setZoomAsText("500%");
The simplest solution is to create a ZoomContributionViewItem. This item can be added to Menumanagers (in theory to toolbarmanagers also, but there is a nasty null-pointer exception related in Zest 1.1).
The constructor needs an IZoomableWorkbenchPart, where you need to provide a single method that returns the graph viewer.
If you need something more specific, look at the code of the Zest ZoomContributionViewItem code, how they had implemented it.