Git Product home page Git Product logo

mxn's People

Contributors

adamd avatar andreszules avatar brunob avatar cyberhobo avatar datenpate avatar davydotcom avatar dezfowler avatar eloupias avatar freyfogle avatar ginkel avatar gravitystorm avatar hayley avatar jcushman avatar jdorn avatar kryzhovnik avatar minitech avatar palewire avatar plopesc avatar sampersson avatar smitchell avatar tobiasurff avatar vicchi avatar vitotafuni avatar vsr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mxn's Issues

CloudMade Polylines Autofill if the line "closes"

When using CloudMade and building a polygon we'd like to draw just the border with no fill. However, the system will autofill the polygon when it detects the polyline has closed. We try to use the setClosed=false attribute but it has no affect.

If we alter the start (or end) point slightly to "break" the poly while not obviously affecting the look of the poly to the user the fill is removed.

This will fill (even though we don't want it to):

var cloudmade_key = "2152519b8af157b6b79dbae95063afc3";
function initialize() {
var gmapstraction = new mxn.Mapstraction('map_canvas','cloudmade');
poly(gmapstraction);  
}
function poly(map) {
map.setCenterAndZoom(new mxn.LatLonPoint(37.78,-122.395033836365), 12);
// create a polygon object
var myPoly = new mxn.Polyline([
new mxn.LatLonPoint(37.7945928242851,-122.395033836365), new mxn.LatLonPoint(37.7938467508748,-122.393960952759), new mxn.LatLonPoint(37.7945928242851,-122.39275932312), new mxn.LatLonPoint(37.789505810689,-122.387609481812), new mxn.LatLonPoint(37.7782792282611,-122.387351989746), new mxn.LatLonPoint(37.7768545853105,-122.390570640564), new mxn.LatLonPoint(37.7690524823224,-122.397179603577), new mxn.LatLonPoint(37.7668813159428,-122.394347190857), new mxn.LatLonPoint(37.7658635597592,-122.407650947571), new mxn.LatLonPoint(37.7689167862912,-122.408037185669), new mxn.LatLonPoint(37.7765493011063,-122.417650222778), new mxn.LatLonPoint(37.7945928242851,-122.395033836365)]);
myPoly.addData({closed:false});
myPoly.setClosed(false);
map.addPolyline(myPoly);
}

This will not fill (first point changed slightly):

var cloudmade_key = "2152519b8af157b6b79dbae95063afc3";
function initialize() {
var gmapstraction = new mxn.Mapstraction('map_canvas','cloudmade');
poly(gmapstraction);  
}
function poly(map) {
map.setCenterAndZoom(new mxn.LatLonPoint(37.78,-122.395033), 12);
// create a polygon object
var myPoly = new mxn.Polyline([
new mxn.LatLonPoint(37.7945928242851,-122.395033836365), new mxn.LatLonPoint(37.7938467508748,-122.393960952759), new mxn.LatLonPoint(37.7945928242851,-122.39275932312), new mxn.LatLonPoint(37.789505810689,-122.387609481812), new mxn.LatLonPoint(37.7782792282611,-122.387351989746), new mxn.LatLonPoint(37.7768545853105,-122.390570640564), new mxn.LatLonPoint(37.7690524823224,-122.397179603577), new mxn.LatLonPoint(37.7668813159428,-122.394347190857), new mxn.LatLonPoint(37.7658635597592,-122.407650947571), new mxn.LatLonPoint(37.7689167862912,-122.408037185669), new mxn.LatLonPoint(37.7765493011063,-122.417650222778), new mxn.LatLonPoint(37.7945928242851,-122.395033836365)]);
myPoly.addData({closed:false});
myPoly.setClosed(false);
map.addPolyline(myPoly);
}

Thanks! Great app!

Support for GMaps v3: MarkerOptions.optimized / support for aPNG and aGIF markers

Hi together,

as this framework is the basis for the Geo Mashup plugin integrating Google Maps with WordPress I was playing around with the customization.

I found out, that since v3.4 of the GMaps API, there is a parameter called "MarkerOptions.optimized" which needs to be defined false upon using an animated PNG or animated GIF as a marker icon.

To achieve this, I propose to modify "js/mxn/mxn.googlev3.core.js" of the framework:

AFTER

                options.shadow = new google.maps.MarkerImage(this.iconShadowUrl);
            }
        }

ADD

        if(typeof(this.attributes['iconOptimized']) !== 'undefined') {
            options.optimized = this.attributes['iconOptimized'] ? true : false;
        }

This change allows users to define "iconOptimized: false" with marker options to be able to use aPNG/ aGIF files.

Hope this helps developing this framework further :-)

MapstractionGeocoder object

Hello people, i´m following the examples from book 'map-scripting-101...' and in the page 46 from Chapter 3 i can´t building the map.
I tried sometimes and I discovered where is the error, the error is in the line which calls ' new MapstractionGeocoder(add_point, 'googlev3'); '
I just imported the javascript files that are described in the book:
http://maps.google.com/maps/api/js?sensor=false
mxn.js
mxn.core.js
googlev3.core.js
mxn.google.geocoder.js
mxn.googlev3.geocoder.js (i imported this one to try but unsuccessfully)

My code is very simple and I verified in the FireBug and i detected that MapstractionGeocoder is undefined. Somebody has any idea?
Thanks in advance.

var mapstraction, geocoder;
function create_map() {
    mapstraction = new mxn.Mapstraction('mymap', 'googlev3');
    mapstraction.setCenterAndZoom(new mxn.LatLonPoint(-34.397, 150.644), 7);
    mapstraction.addLargeControls();
    mapstraction.addMapTypeControls();
    geocoder = new MapstractionGeocoder(add_point, 'googlev3');
    // Create address object
    var address = {
        street : "38 Ringold Street",
        locality : "San Francisco",
        region : "CA",
        country : "US"
    };
    geocoder.geocode(address);
}
function add_point(loc) {
    var mk = new mxn.Marker(loc.point);
    mk.setInfoBubble(loc.address);
    mapstraction.addMarker(mk);
    mk.openBubble();
    mapstraction.autoCenterAndZoom();
}

Bug in icon hover code (google provider)

Not sure if this is the best place to submit a bug report, but there seems to be a problem with the icon hover code, starting on line 449 of mxn.google.core.js. The code is:

    if(this.hoverIconUrl){
        GEvent.addListener(gmarker, "mouseover", function() {
            gmarker.setImage(this.hoverIconUrl);
        });
        GEvent.addListener(gmarker, "mouseout", function() {
            gmarker.setImage(this.iconUrl);
        });
    }

The problem is the "this" reference chances between the test and the callback closures. So when the callbacks are actually called, this.hoverIconUrl and this.iconUrl are both undefined. This can be solved by adding some new references that persist into the closures. Something like this:

    if(this.hoverIconUrl){
        var hoverIconUrl = this.hoverIconUrl;
        var iconUrl = this.iconUrl;

        GEvent.addListener(gmarker, "mouseover", function() {
            gmarker.setImage(hoverIconUrl);
        });
        GEvent.addListener(gmarker, "mouseout", function() {
            gmarker.setImage(iconUrl);
        });
    }

Google V2: Allow closed polyline

At present, when creating a polyline where the first and the last points
are equal, the resulting curve is automatically converted to GPolygon
without an 'opt-out' alternative.

What if to enable such a case, making the following patch to
mxn.google.core.js:504:

Remove:
if (this.closed || gpoints[0].equals(gpoints[length-1])) {

Add:
if (this.closed || !('closed' in this) && gpoints[0].equals(gpoints[length-1])) {

Basically, what it does is checking if a .closed field isn't present before
checking endpoints. This way it's now possible to enforce closed GPolyline
by explicitly setting .closed = false.

removeOverlay()

We can add overlays to the map but it's not possible to remove them. I'm asking myself if we could try implement removeOverlay() function.

Maybe every implementation of addOverlay() should keep urls of overlays added to the map in an array (map.overlays). After that, each provider code could provide a removeOverlay() function and retrieve the right overlay to remove by its url.

What does other people think about this ?

++

load polygon features from GeoJSON and get feature info on click event usin mapstraction javascript lib.

Hello..
plz can anyone solve this problem..
i have to load all polygon features from GeoJSON file and display these on map and also on click/hover of particular polygon should display feature attributes...

Geojson data is like this:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "Name": "plot-no 5 0fad", "Descriptio": "ABC", "Contact person": "", "Email ID": "", "Mobile number": "" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 75.889982, 17.712351 ], [ 75.889616, 17.713542 ], [ 75.889807, 17.713600 ], [ 75.889885, 17.713501 ], [ 75.890032, 17.713550 ], [ 75.890067, 17.713658 ], [ 75.890171, 17.713666 ], [ 75.890762, 17.713708 ], [ 75.891047, 17.713716 ], [ 75.891468, 17.713692 ], [ 75.891861, 17.713726 ], [ 75.891948, 17.713701 ], [ 75.891936, 17.712599 ], [ 75.890607, 17.712434 ], [ 75.890330, 17.712359 ], [ 75.889982, 17.712351 ] ] ] } }....

please paste the code.

Thanks,

removeMarker() should call closeBubble()

Hi, i'm not sure about this, so i open an issue befoire trying to code this. When a marker had an info bubble opened and if you remove that marker from the map with removeMarker() the info bubble stay opened on the map. I think that we should close this info bublle when the marker is removed.

What do you think of that ?

Should mxn.util.merge() overwrite existing properties?

There may be a reason that merge() does not overwrite existing properties, but it caused me confusion in the way it is used by setOptions(). Because Mapstraction.prototype.setOptions calls mxn.util.merge, it will not work to set options that have already been set. This is in contrast to Mapstraction.prototype.setOption(), which always overwrites the existing value.

Adding overwrite to merge() would also provide a way to override the default method for a provider by calling mxn.register() a second time, which I've found myself wanting to do in some installations.

License.js

Hi,

I was looking at your code, to check in the files' headers or License file specify clearly the license that Mapstraction uses. Apparently, it is defined under BSD license. However, I found a file called license.js that says "all right reserved" (https://github.com/mapstraction/mxn/blob/master/license.js) and this is the opposite of an Open Source License.
I would like to confirm that all code is Open Source, and if so, then, modify this file, because this creates doubts. Also, a file called LICENSE.txt in the root directory is a good guide for the people to ensure that code is Open.

Thanks.

Inverted iconanchors in OpenLayers

In Marker.toProprietary function, the anchor point should be inverted so it can be used in the same way as in other providers.
if(this.iconAnchor) {
anchor = new OpenLayers.Pixel(-this.iconAnchor[0], -this.iconAnchor[1]);
}

openlayers addImageOverlay error

When attempting to add an image overlay using openlayers, Firebug issues a "position is null" error.

The openlayers map displays, but the overlay image does not.

See code below:

    function initialize() {
        // initialise the map with your choice of API
        var mapstraction = new mxn.Mapstraction('map_canvas','openlayers');

        var myPoint = new mxn.LatLonPoint(44.031507,-105.3712465);
        mapstraction.addControls({
            pan: true,
            zoom: 'small',
            map_type: true
        });
        mapstraction.setCenterAndZoom(myPoint, 11);
        mapstraction.addImageOverlay("over","CORDEROAPR11.png",50,43.975458,-105.424392, 44.087556, -105.317911);
        //mapstraction.addSmallControls();    
    }

how to delay marker loading openlayers map with mapstraction

I have a page with displays 10 markers in an openlayers map used via mapstraction.

I want to load map first then marker one by one say after every second, I tried using window.setTimeout() it loads the map and loads only first marker after that it stops.

var map;
var lat = new Array() ;
lat=${latitude};
var lon= new Array();
lon=${longitude};
var oneByOneCounter=0;
var count=10;
function initMap(){

map = new Mapstraction('mymap','openlayers');
map.setCenter(new LatLonPoint(0.0,0.0));
map.addControls({pan: true, zoom:'small', map_type:true});
renderMarkerOneByOne();
map.autoCenterAndZoom();
};

function renderMarkerOneByOne() {
if (oneByOneCounter < count) {
latitude= lat[oneByOneCounter];
longitude= lon[oneByOneCounter];
var point = new LatLonPoint(latitude,longitude);
var marker = new Marker(point);
var info = "("+(oneByOneCounter+1)+")";
marker.setInfoBubble(info);
marker.setHover(true);
marker.setIcon('icon_green.png', [27,31]);
map.addMarker(marker);

oneByOneCounter++;
window.setTimeout("renderMarkerOneByOne()", 1000);
} else {
oneByOneCounter = 0;
}
}

I am not able to figure out where I am doing wrong renderMarkerOneByOne() function executes properly and on putting alert() I can see the marker object is getting created all the time but, for some reason after the first marker gets plotted the other markers are not getting plotted on the map.

I am pretty new to mapstraction and openlayers and most of the functions in mapstraction doesn't seems to be working with openlayers api but, I don't have choice to change the map provider.

Any help or suggestion is welcomed

Thanks

MXN: Webkit browser auto-loading issues

For now a workaround is to comment out the first function in mxn.js which loads all of the libraries we need and to load them manually in the html.

aka. instead of:

<script src="mxn.js?(google)" type="text/javascript"></script>

do:

<script src="mxn.js" type="text/javascript"></script> <script src="mxn.core.js" type="text/javascript"></script> <script src="/mxn.google.core.js" type="text/javascript"></script>

update the sandbox (add new providers and remove depreciated ones)

Yahoo APi will stop to work this month, we should remove it form the sandbox.

Also, Gary Gale said :

One overall question regarding the Nokia/Ovi Maps API ... the sandbox doesn't currently support this and I have very little (in other words, virtually no) experience of the Google App Engine ... are there any plans to update the sandbox to add in support for my port of this API?

++

autoCenterAndZoom doesn't work well with world-wide points

When there are markers above and below the equator and left and right of the meridian, auto Center and zoom seems to ignore some of them and zoom in on one point;

In this case, with markers in Europe only it works fine, but with markers in Europe, Africa and Oceana (Australia, New Zealand and Singapore) the map zooms in on Southern Africa.

Using googlemapsv3.

set up code

            map = new mxn.Mapstraction("map", "googlev3");
    map.setCenterAndZoom(new mxn.LatLonPoint(0,0), 1);
    map.addLargeControls();
    map.addMapTypeControls();

markers are added using addMarkerWithData.

Can't disable dragging

I find it impossible to disable dragging for a GoogleV3 map. None of these have any sort of effect:

var map = new mxn.Mapstraction('map', 'googlev3');
map.setOptions({ enableDragging : false });
map.setOption('enableDragging', false);
map.dragging(false);
map.applyOptions();

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.