Hi I am using ExtJS 5 framework to develop my application.
I have a requirement to create reports where I need to show a report using world map.
I have found fusionmap(interactive map) provided by FusionCharts that suits my requirement where user can interact with the map.
Is there any similar component available in ExtJS 5 ?
I really like the leafletjs library.
You can easily add a map to a ExtJS panel like so:
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
});
var map = L.map(yourPanel.getEl().id)
.addLayer(tiles)
.setView([51.505, -0.09], 13);
Also read the quick start guide here.
And then just follow the interactive map tutorial to achieve the desired result.
I would also recommend leafletjs. Here is a nice tutorial for integrating it into an extjs application: http://www.sencha.com/blog/integrating-ext-js-with-3rd-party-libraries/
Related
Is there any way how make normal Map View in flutter. I need to have map ready when user opens the app. Only thing I saw, is that apptree plugin, but I could only make the map appear after user taps the button (and fullscreen, I need to put it into container). Basicaly what I need is some Map Widget, is there any ?
You can use some plugin like
https://github.com/apptreesoftware/flutter_google_map_view
flutter plugin for displaying google maps on iOS and Android
//Create an instance variable for the mapView
var _mapView = new MapView();
//Add a method to call to show the map.
void showMap() {
_mapView.show(new MapOptions(showUserLocation: true));
}
Unfortunately this is one of the drawbacks of choosing to render own components on GPU instead of using OEM solutions, they need to bake GMaps renderer over Flutter APIs and probably will, in the meanwhile, try this implementation: https://github.com/apptreesoftware/flutter_map
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
I Use Leaflet Map Plugin. i Write this code for create and load google map tiles in LeafLet
var map = L.map('map').setView([31.2744015, 48.7251283], 18);
// load a tile layer
//Satellite:
L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.SATELLITE,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);
this code work fine. But I Want Load another google Map option in this plugin Like 3D View map
But will this be done?
thanks for help me.
Two things:
Loading map tiles from Google using just a L.TileLayer contravenes the terms&conditions of Google Maps (the part about "accessing the content only through the Google Maps API"). Do not be surprised if Google gets angry at that.
As pointed out in the answers to the question «Leaflet Map API with Google Satellite Layer» , look in the Leaflet plugins list. In particular, GoogleMutant might be of interest.
As of now, Leaflet is able to display 2D maps only. There are no plans to make it display oblique imagery, or provide tilt capabilities.
If you need these features, you might want to have a look at other web mapping libraries, such as https://www.mapbox.com/mapbox-gl-js/api/ or https://cesiumjs.org/. These can handle more degrees of camera freedom, and some degree of terrain elevation display.
https://labs.mapbox.com/bites/00093/
pls see the source code of it , as
window.setInterval(function(){
$('.rotating').attr('style','-webkit-transform:rotateZ('+angle+'deg);-moz-transform:rotateZ('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
if ($('.rotating').length>0) $('.pivotmarker').attr('style','-webkit-transform: rotateY('+angle+'deg);-moz-transform: rotateY('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
angle=angle*-1;
},1500);
may it help
I need to implement directions using Google maps inside my GWT web application.
Currently I'm using maps API v2 library.
I have several issues I have not been able to solve yet:
Include Get Directions panel (similar to the Google maps one)
Get list of streets names from the request.
PS How to implement mouse wheel zoom control?
Here is the answer for your mouse wheel zoom question
Implement HasMouleWheelHandlers and its the API's like getX(), getY(), getScreenX(), getScreenY() and do your zoom operations
I found out how to easily implement zoom functionality:
final MapWidget map = new MapWidget(startLatLng, 12);
map.setSize("100%", "100%");
MapUIOptions options = map.getDefaultUI();
options.setScrollwheel(true);
map.setUI(options);
For more info check out maps demo. You can checkout project code and test it in eclipse!
I'm still searching for solution to other problems.
I'm absolute newbie as for Google Map / Yahoo Map. I would like to know if it is technically possible to ask to show any city in any country DYNAMICALLY (I mean by passing parameters) and then to show some pictures OVER the map near the city ?
Thanks.
There's a multitude of ways you could accomplish this, some prettier than others.
You could use GInfoWindow to display a popup window with pictures in it at any location.
You could use one of the handy libraries offered here http://code.google.com/p/gmaps-utility-library-dev/ to assist you in displaying those images.
What I would recommend, however, is using http://econym.org.uk/gmap/ewindows.htm to create a window that is similar to GInfoWindow but that is styled by you. Just style the window so that it appears to simply be an overlaid picture.
You could choose to fool around with z-index's and manual positioning with a JavaScript library like jQuery.
Also, to answer the beginning of your question yes you can refocus the map anywhere using GMap's .setCenter() method. Documentation of setCenter(), GInfoWindow and much more available at http://code.google.com/apis/maps/documentation/reference.html
I just started learning this myself.
Here is a good link to get started:
http://code.google.com/apis/maps/
On your second question,
show some pictures OVER the map near
the city?
I like #andykram's response above, but I've implemented this previously using the Panoramio layer available for the Maps API. It can get a bit crowded but its an interface people are used to and because it is so simple to include it in a map, it just be the solution for you this time.
Just add the following to your map initialisation function.
var myLayer = new GLayer("com.panoramio.all");
map.addOverlay(myLayer);
As far as dynamically showing any city in the world in a Google Map, the solution is easily implemented - you need to geocode the name of the city. This can be done by triggering a function on an event like onclick.
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
If you hit a hurdle, try this first - http://econym.org.uk/gmap/ - possibly the best resource for the GMaps API on the web.
GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).