I'm working on a mapping project and I need to mark some building to display some data for that specific building. Basically, literally I'm trying to build something like this
I have found off canvas project and I'm using it for mine map, here is a working JSFIDDLE example.
For the map I'm using openlayers3, openstreetmap, I'm not using google-maps and I'm not interesting in using it, I'm just referencing on this picture because they have a nice example of this off canvas display data menu.
As you can see I have marked different area around NYC and I would like to, when I click on the example I trigger off canvas menu (don't mind off canvas nav-bar style it will change) and display proper data for that object.
Mine question is:
What is the best way to do this, I would like to learn how to glue this off-canvas to mine map, so markers can trigger off-canvas?
I know that there is a hidden <input type="checkbox" id="nav-trigger" class="nav-trigger" /> who I displaying as hamburger icon which is used to trigger off canvas menu. But I do not understand how can I connect all markers to the canvas to display different data for each building.
I would like to learn how can I do this? It will be great to use javascript or jquery for this, I don't thing that openlayers3 have this kind of flexibility, but maybe there is, I'm little confused about this, can someone help me build this, thank you.
Related
I'm trying to toggle layers in iOS for MapBox but can't figure out how it's done. I've been looking at this example:
https://www.mapbox.com/mapbox.js/example/v1.0.0/layers/
But I can't figure out how to use this file with the map view in Xcode. Can anyone give me any info on how this is done? Or whether it's possible?
Just a bit of background on the setup, I have a mapview created and running fine. I then have numerous GPX trails which have been exported in to TileSets and added to a style as a layer. I have a layer called 'where_trail' which I want to toggle on and off with a button. Currently all the layers are drawing on the map, I just can't figure out how to access the layers and hide them. Can anyone offer me some guidance on this please?
Thanks
That example is for Mapbox.js and written in JavaScript: it's intended for use with our JavaScript framework, which, if you're in Swift, Objc, and Xcode, is not what you're using.
There isn't yet a full-fledged example of switching styles for the iOS framework, but the property to pay attention to is the styleURL - you can assign the value of that map property to a new NSURL, which you can get from Studio or from a default style. Wire this up to an action and it should do exactly what you're looking for.
My friend and I are trying to making an interactive map the goes to a new page based on the region clicked. We might try image mapping via dreamweaver but want something with a little more flair/interaction ie: glowing on hover, highlights, ect.
Look into KineticJS. It's an HTML5 Canvas library that allows you to redraw shapes, apply effects, tell when you click on shapes, etc. You can use the on function to go to a new page when you click on it, and there's probably something for the glowing.
I use http://jvectormap.com/
There are maps for lots of countries and you can add your own quite easily.
Here's an example: http://jvectormap.com/examples/world-gdp/
For me imagemapster is one of the best for this task, have multiple functions and a well documented page
I'm currently using an application that generates large images for organizational maps, unfortunately the content is quite small due to the volume of data being output. I would like to find a way that allows the user to view segments of the map in an intuitive manner, yet still allow the user to click content inside of the map.
The first thing that came to mind was an image magnifier using something similar to the loupe jQuery plugin. This works great for magnifying the image, but I can't select content once magnified. If anyone has any suggestions for possible solutions to this issue I would greatly appreciate the help.
Thanks!
You might try Etalage: http://frique.me/demos/etalage/ -- if you click on the image, the link works (triggers the javascript alert), almost no other image zoomer seems to do that.
I'm trying to find something that returns the coordinates on a click, so I can ask users to zoom and and find things within a picture, and then I'll have the coordinates to crop the picture to extract the items they've found. But I haven't found a script that does that yet, either.
I have a simple problem in my mind but can't figure out where to start and JS isn't my strongest front. The JavaScript part is what gives me troubles.
I have an uploaded image which I want to drag my mouse upon to make a rectangle and get the rectangle coordinates. Those coordinates should go into my Rails app db so that this rectangle is latter displayed to the user and the image part that is selected will be zoomed to the user.
I've gone through several jQuery plugins that do tagging on images but first of all they are too complex for my needs and can't be customizable to this specific need of mine.
In order to get a real live example please see this http://www.stylebistro.com/lookbook/Tops/PJfJzgo2fN9
It is essentially what I want to achieve but the administration part is giving me troubles.
Regards,
Yavor
jCrop has an API that returns image coordinates. It can zoom the image as well, so it should be a good fit.
I'm trying to superpose two GwtCanvas (which use an Html5 canvas). I am able to get this effect by using an absolute panel. But by doing this, I can't get my object to fill my panel. I would like to this so I can do a whiteboard in GWT. So far, I'm pretty advance but I would like to have multiple canvas overlay to support undo or preview. For example, if we draw a rectangle, it would be good to preview it as we move the mouse. I have found a javascript tutorial to do this :
ex:
http://dev.opera.com/articles/view/html5-canvas-painting/
There is a javascript example, but I'm not sure how to do the bridge between GWT and JavaScript. Any ideas ?
I think you should go for GWT JSNI - This way you would be able to access your JS from GWT code. You can find more information about JSNI at the following location:
http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html