Fenêtre contextuelle mobile ArcGIS Identify (Dojo)

8

J'essaie d'obtenir une fenêtre contextuelle qui identifie un emplacement à déplacer. Mon code est similaire à l'exemple de l'API:

var popupOptions = {
    fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255, 0, 0]), 2),
                new dojo.Color([255, 255, 0, 0.25]))
}

var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

map = new esri.Map("map", {
    infoWindow:popup,
    extent: initExtent
});

Je n'arrive pas à trouver un endroit qui me permette de rendre cette fenêtre contextuelle mobile (je pensais essayer d'implémenter dojo.dnd.moveable).

J'ai essayé, sans succès:

function makeMoveable(node){
    var dnd = new dojo.dnd.Moveable(dojo.byId(node));
}
makeMoveable(popup);

Quelqu'un a une suggestion?

javascript arcgis-javascript-api popup dojo motoxer4533
la source
2
Si j'étais vous, je n'utiliserais pas celui dijitde ESRI. Je travaille beaucoup avec l'api esri JS et j'y ai trouvé beaucoup de bugs. Et IMO ces modules ne sont pas très configurables.
Krystian
1
J'ai déjà pensé à faire quelque chose de similaire, mais rendre la popup mobile n'est qu'une partie du problème - la fenêtre pointe vers l'emplacement auquel elle fait référence en utilisant l'une de ces images: serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/ dijit /… À moins que vous ne vouliez entrer dans un problème plutôt collant, vous devrez vivre avec le popup ne pointant plus vers le bon emplacement
tomfumb

Réponses:

6

Ce blog a un excellent exemple de comment rendre la fenêtre glissable et masquer la flèche à l'aide de dojo: https://gavinr.com/2015/04/13/arcgis-javascript-draggable-infowindow

Voici l'extrait de clé javascript:

require([
    'esri/arcgis/utils',
    'dojo/dnd/Moveable',
    'dojo/query',
    'dojo/on',
    'dojo/dom-class'
], function (
    arcgisUtils,
    Moveable,
    query,
    on,
    domClass
) {
    var webMapItemID = "fe0827dfea2441f5b206b0e2c37b79cd";
    arcgisUtils.createMap(webMapItemID, "map", {}).then(function(response) {
        var map = response.map;
        var handle = query(".title", map.infoWindow.domNode)[0];
        var dnd = new Moveable(map.infoWindow.domNode, {
            handle: handle
        });

        // when the infoWindow is moved, hide the arrow:
        on(dnd, 'FirstMove', function() {
            // hide pointer and outerpointer (used depending on where the pointer is shown)
            var arrowNode =  query(".outerPointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");

            var arrowNode =  query(".pointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");
        }.bind(this));
    });
});
Chris
la source
3

Ajoutez un div avec id identifierDiv à votre code html et changez votre javascript pour être

var popup = new esri.dijit.Popup({popupOptions}, "identifyDiv");

map = new esri.Map("map", {
    infoWindow:popup,
    extent: initExtent
});

makeMoveable("identifyDiv");
tchapo
la source
0

Sur la base des commentaires sur ma question, j'ai décidé de ne pas rendre cette boîte mobile et de conserver l'icône de fermeture pour les utilisateurs.

motoxer4533
la source