Adding hotkey functionality in Openlayer - javascript

In my Openlayer based map application, I want to enable user to perform an action using a custom key combination.
How can this be done? Do I need to make use of ol.interaction.Interaction?

Not sure of what you exactly expect but you will find below an answer according to my understanding.
Some interactions like ol.interaction.Draw already support default key combinations e.g http://openlayers.org/en/master/apidoc/ol.events.condition.html.
If you need custom combination of keys on existing interactions, these conditions functions act as a tiny wrapper on top of native JavaScript keyboard keys of your browser.
You need to create a new function that look more or less like this excerpt function example from the OpenLayers code and adapt it to manage your own custom key combination.

Related

Google Maps API and DynamicMapsEngineLayer: Loop Over Features in the Map

[Edit APRIL 2, 2014]
I want to emphasize something. My scenario does not have a user event driving it to trigger an event listener. I know the Maps API documentation shows how to get a feature's featureId property from a MapsEngineMouseEvent. But my scenario needs to get the feature's featureId programmatically.
I've also tried programmatically "faking" a click, but that doesn't work either. (It seems the event object can't be instantiated??)
My hunch is, the solution to this either 1) doesn't exist, 2) is deceptively simple, or 3) will only be discovered if a minimum level 8 mage rolls a natural 20 wisdom check..
[Original Problem Statement]
I have few scenarios in a customized Google Maps client where I need to loop over features in a DynamicMapsEngineLayer and modify their style traits. The DynamicMapsEngineLayer works by performing..
..client-side rendering of vector data, allowing the developer to
dynamically restyle the vector layer in response to user interactions
like hover and click.
The Maps API documentation describes how to restyle individual features using event listeners, which expose a special featureId value assigned by Google servers. But my scenario doesn't have user-driven events. For example, consider this hypothetical link:
http://www.acme-map.com/index.php?ZoomToAndHighlightFeatureWithId=12345
FeatureWithId is our own unique id, not Google's special
featureId, which we don't have at this point in the runtime.
I need the map to load right above a feature and highlight it by changing its style trait. It needs to do this programmatically when the map first loads, without any user interaction. If these vector features are truly rendered in the DOM, then surely there's a way, no matter how cryptic, to reach into the map's guts and access these objects?
Is there a way to loop over individual features in a DynamicMapsEngineLayer or get the featureId property without an event listener?
I may be missing something here, but if you already know the feature ID, you can restyle it directly without an event. Just call getFeatureStyle() directly and set the style as you wish:
var style = dynamicLayer.getFeatureStyle('1234');
style.strokeColor = '#FF0000';
style.iconImage = 'url(images/myIcon.png)';
And if you don't know the feature ID, but you do have some other attribute to query against, you can make a call out to the Maps Engine API to fetch it.

Text edit toolbar solution (js), with low-level customization?

I'm looking for a js text edit toolbar, which allows for customization of base functions.
The best example is: Our platform employs a custom text parsing engine, and we use custom tags. Custom tags, even for basics like bold, etc. Therefore, I will need to change existing base formatting buttons to use our tags as opposed to html.
I have not been able to locate a solution, which allows the customization of these basic buttons. I can, of course use something mainstream, and rebuild all the base functionality in custom buttons. However, before doing that, I want to make sure there is not something already available.
Do you know of a solution which supports low level customization?
You can have look at this one: https://github.com/bergie/hallo

Making Google Maps driving directions behave more like actual Google Maps

I've been doing driving directions in my map app using the directionsRenderer, so it renders both the path (on the map) and the html list of directions. My app works basically like this example: http://code.google.com/apis/maps/documentation/javascript/examples/directions-draggable.html
However, now I've been asked to make it a little more like the directions on Google Maps proper, for instance here
My client would like the little popups when you hover over the html items, as well as the little icons showing right turn, bear left, merge, etc.
I've managed to render my own html from the DirectionsService response, and hook up events for hovering and associate them with points on the map, but where I could use help is:
Getting the turn by turn icons. I imagine this isn't easy because I get each step as html text ("Take exit 433 on the left to merge onto I-80 E toward Bay Bridge/Oakland"), and I imagine that could be challenging to parse reasonably to determine which icon to show
Making the little mini-popups over the map. Although I can make the popups themselves, it's probably challenging or impossible to do it the exact same way because I don't have a short version of the instructions.
In any case, I thought I'd check if anyone knows a way to do this sort of thing -- not necessarily exactly, but just closer to it -- or if I'm just out of luck because google hasn't made any of that sort of functionality available via their api.
You are correct that you will have to examine strings to get turn icons. You can parse the DirectionsResult object yourself (it is "JSON-like" according to Google's documentation) rather than using the DirectionsRenderer if you wish, but I don't think it will get you anything much. Here's how it would go:
The DirectionsResult.route property will be an array of DirectionsRoute objects. If you didn't set provideRouteAlternatives to true, then there will only be one DirectionsRoute object in the array.
The DirectionsRoute object, in turn, has a property called legs. That property is an array of DirectionsLeg objects. If you have specified no waypoints (i.e., an intermediary destination), just a start and end point, then this array will also only have one object in it.
The DirectionsLeg object, in turn, has a property called steps. It will be an array where each element will be a DirectionsStep object.
The DirectionsStep object has a property called instructions. That is a string and is what you will have to examine using a regexp or whatever to figure out what turn icon to use. (It's possible that this may be easier to work with than the HTML you mention that I imagine is coming from the DirectionsRenderer. Or it may be possible that it isn't any easier whatsoever. I'm not sure. I've never actually done it.)

Is there any Javascript library that provides drag'n'drop creation/editing of form elements?

I am writing a web application that lets a user create their own forms by dragging and dropping input elements (textfields, textareas, etc.).
Currently, the user is able to add / reorder (up or down) / remove form elements, but I need to make them freely draggable.
Some time ago I have seen a tool written in Javascript that lets a user drag&drop tables and then generates SQL from that, but I can't remember where I saw it.
Maybe there is some kind of JS library for this, preferably something for Mootools/jQuery? I searched for it, but didn't get any results.
Any ideas?
See jQueryUI. Specifically draggable and droppable.

Javascript based interactive map application

Greetings,
I'm looking for a quick way of slicing the map of a country by regions and when clicked on a specific region, showing some gui with the info of the region. I am looking for a quick framework, plugin or such to achieve this swiftly. I know it can easily be achieved using flash but I want to rely on javascript instead.
Cheers
have you had a look at Seadragon? I know it will do the slicing and the zooming for you but you'd probably have to extend it by yourself to get an info window to pop up.
You may have a look at http://www.openlayers.org
Have you checked Web Maps Lite from CloudMade?
http://developers.cloudmade.com/projects/show/web-maps-lite
You may just add CM.Polygon for each region, and then processes onClick event.
Combine these two examples:
http://developers.cloudmade.com/projects/web-maps-lite/examples/info-window
http://developers.cloudmade.com/projects/web-maps-lite/examples/polylines-and-polygons

Categories

Resources