I was wondering if there is a good way to draw icons (markers) in the middle of polygons, using kml in google earth plugin.
Currently I solve this by calculating the middle, and for every polygon adding a placemark with the icon in the calculated center.
But then i have to make sure that when I remove the polygom I remove the marker also.
Is there a way to make them connected and not seperate like that?
Thank you!
You could encapsulate the placemark and polygon objects into a single object, allowing you to create custom "PlacemarkPolygons" passing in any options you require. So you would have.
function PlacemarkPolygons(options) {
// your set up...
}
To see what I mean take a look at this "CustomOverlay" example that wraps a groundOverlay and a polygon to provide click events for the groundOverlay.
http://jsfiddle.net/2bUXQ/
Although the Google Earth API objects are different from yours, the principal would be exactly the same. You would define a custom object that wraps the two API objects that you want to associate together, along with any methods that help you to use it.
I am going to develop a mechanism to export as many as approx. 100 photos with their position information to a KML/KMZ file.
Just wondering what is the best practise to do this. My initial quick options are:
1. use html img tag in the description of a placemark to internally reference the actual photos wrapped in the internal "files" folder in the KMZ;
2. use html img tag in the description of a placemark to reference the URL of a photo (publicly accessible).
Option one involves writing all photos in the internal "files" folder of a KMZ. This would make it a massive file. Meanwhile, all photos would have to be loaded in memory during the loading of the KMZ file.
My question is with the option 2, if a particular photo would not be loaded until the user clicks on the placemark to open the popup balloon OR all the photos are loaded like the option 1?
Thanks!
Cheers,
Alex
You can think of Google Earth as a specialized web browser and the HTML within a given placemark as being handled same way HTML in a web browser is handled. In option 2 the images are not downloaded until user clicks the placemark and the description balloon is selected and starts to render.
Option 1 you have a huge KMZ file as you describe that must be downloaded entirely to the client and unpacked locally. The file may be too large to download in a mobile device if you want Google Earth mobile users to view it. The Google Earth essentially unpack the KMZ then access images as in the case of option 2 when the placemark with that image is selected. Only difference is that the entire collection must be downloaded in one shot so the initial startup time is slower and depends on network speed.
I have developed an LWUIT app. I have two types of images dispayed in the app. One coming from server side that need to displayed (like a photo posted and saved to server side) and one packaged in my jar and displayed mainly as icons (like a music icon, loading animation gif etc). I need to display all images according to the sreen size and resolution. The first kind is displayed by taking the screen display height and width and then use scale method and show a scaled version of the image. But however I have no idea how to show the second kind. i.e. icons. Example, my loading image looks good in most of the phones but for some phones like samsung, it looks blurred and over-sized. How to do this. My basic idea is to keep 3 types of images of icons like icon_width_lowXheight_low.png, icon_width_mediumXheight_medium.png and image_width_highXheight_high.png and show it based on the screen size. Please let me know the bets way to achieve this?
Thanks,
Parvathy
You should use MultiImages which were added in LWUIT 1.5. I don't have a link for this in LWUIT but our work in Codename One is pretty close to this so check out the How Do I? on multi images (and I suggest migration to Codename One regardless).
I think that you will need to use this
Image i = Image.createImage("your image path here");
i = i.scaled(widthValue, heightValue);
And put this values in relation to the Display.getInstance().getDisplayHeight() and Display.getInstance().getDisplayWidth()
Right?
We are developing this web app: http://projects.igre.emich.edu/iccarsp/
Now we are trying to do the following:
upload an image on the viewer
adjust the image (move, rotate etc) to its accurate location
measure the area of the image area (or maybe digitizing it to measure the frame of the image)
output the result (the background and the uploaded image) as KML
I did research it seems that we can do all of this in Google Earth desktop version, so we are trying to do the same thing on web plugin, but Google did not publish the code for these functions(correct?)
So I am wondering if there is any other way to do the functions on the web in Google Earth Plugin. Any advice will help thanks!
About area calculation, you can still have a look into GEarthExtensions:
http://code.google.com/p/earth-api-utility-library/
The area of a geo.Path Object is accessible via geo.Path.signedArea_
You just need to define a geo.Path around your Image
But there are some limitations:
"The method is inaccurate for large regions because the Earth's curvature is not accounted for." ( from extensions-0.2.1.js)
Hope this can start to help :-)
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text