responsive

API:et för webbkartan

Uppdaterad: 2012-03-29
Genom att få åtgång till ExpoDesigners API kan man skapa appar för datorer, "paddor" och mobiler.

I listan till höger beskrivs api:et.

Kom igång

Här kommer en beskrivning på hur ni stegvis gör för att komma igång.

Index.cshtml - startsidan

  1. Gå till servern där projektet ligger.
  2. I projektet öppna mappen ewc, i mappen ligger en fil som heter index.cshtml . Öppna denna i en texteditor
  3. Ersätt namnet EWC i länken med klassen brandmed mässnamnet
  4. Byt ut befintlig startbild på mässan genom att ändra url i bilden med usemap id #ImageMap
  5. I taggen mapmed id:et ImageMapså kan du lägga till de hallar som ska vara klickbara i denna mässa.

    Raden för att lägga till en hall ser ut så här:

    <area title="Hall A" shape="rect" coords="23,26,178,123" data-fairid="308" data-hall="A" data-template="Master" href="#" alt="Hall A" />

    Här beskrivs de olika attributen:

    Attribut Beskrivning
    Title Ger bara lite extra information kring hallen och deta visas när man för musen över hallen
    Shape Beskriver hur ytan ser ut. Valbara värden är defaultrect circlepoly
    Coords Här anger man koordinaterna för hallen.
    data-template Här anger ni den template som ska användas för mässan. Templaten brukar traditionellt användas för att visa utomhusområdet,toaletter, trappor osv. Har ni mer funderingar på hur man kan anpassa en template till eran mässa, hör osv gärna av er till oss på Concode. Det finns några olika templates att välja emellan. 2012 Master 200webeller -. Dessa templates innehåller olika saker, och ni kan själva laborera med vilken ni tycker passar bäst till de olika mässorna. Om man sätter -så använder man ingen template alls.
    data-fairid Ange mässid för den mässa som man skall navigera till om man klickar på hallen.
    data-hall Ange här hallbeteckningen för den aktuella hallen.

hallm.cshtml - mobilvyn

När man klickar på en hall i index.csthml så kommer man till följande vy. Denna vy hittar ni också i mappen EWC i api-projektet.

Det man kan konfigurera i denna vy är att kunna lägga till vilka hallar som skall vara valbara i menyn.

Under taggen ul.navså kan man lägga till li-taggar med länkar till hallar. Sätter man klassen activetill li-taggen så blir fliken vald via css. Själva länkens url automatgenereras.

ExpoDesigner Map functions


In order to include 'ExpoMap' in a page, an IFrame must be added to a div. 
Example:

<div>
        <iframe  id="ExpoMap" src="" style="width: 800px; height: 600px; border: 0px;"></iframe>
 </div>

After that, the source of the 'ExpoMap' should be set to a proper URL expo service.
Example:
 $(document).ready(function () {
      $("#ExpoMap")[0].src = "http://api.expodesigner.com/ewc/expowebmapm/308/-/A/-/800/600";
});

There are a numbers of functions in ExpoMap you can using for selecting, deselecting, etc. The only thing you need to do is to get ExpoMap window and then you can call a function by passing the proper argument(s).
Example:

//Getting the window
var winExpoMap = $('#ExpoMap')[0].contentWindow;
if (winExpoMap.selectEntities === undefined) {
      return;
}

//calling 'Select entity' function
winExpoMap.selectEntities(['A05:26','A04:30','A06:28']);
 
//Example for 'Select stand'
 $(document).ready(function () {
      $("#selectstand").click(function (e) {
               //The input filed '#standtoselect' should have value like this A05:26,A04:30,A06:28
               var standNumberList = $("#standtoselect").val().split(','); //Array of stand numbers

              //Geting the ExpoMap page window
               var winExpoMap = $('#ExpoMap')[0].contentWindow;
               if (winExpoMap.deselectAllEntities === undefined || winExpoMap.selectEntities === undefined) {
                   return;
               }

              //Selects the stands with stand numbers contained in standNumberList
               winExpoMap.selectEntities(standNumberList);
           });
});

ExpoMap function list

  • selectEntities(standNumberList) - select stands with stand numbers from the list.
  • deselectEntities(standNumberList) - deselect stands with stand numbers from the list.
  • deselectAllEntities() - deselect all stands.

 

Inställningar i karta

I filen ExpoWebMapSettings-v1.0.0.jsi mappen Scriptsfinns en rad olika egenskaper som kan korrigeras, för att få till ett bra utseende.

Dessa är:

Namn StandardvärdeBeskrivning
ZoomInScaleFactor 1 + 0.35Värdet för hur mycket ett "zoom-steg" ska vara när man zoomar in. Standardvärdet gör att varje zoom-steg vid in-zoomning är 35%
ZoomOutScaleFactor 1 / MapSettings.ZoomInScaleFactorVärdet för hur mycket ett "zoom-steg" ska vara när man zoomar ut. Standardvärdet gör att varje zoom-steg vid ut-zoomning är 35%
ZoomLevelMax 5Värdet för antalet zoom-steg som skall tillåtas. Detta värde används främst när man klickar på en zoom-symbol.
PanStep 50Klickar man på en symbol för att panorera i kartan, så flyttas kartan så här många pixlar.
HallVisibility trueOm hallens linjer skall visas eller ej
HallLineColor "#333"Ange hex-kod för hallens gränslinje
HallLineWidth 10Hur många pixlar bred ska hallen vara?
HallHasFillColor trueOm hallen ska ha en fyllnadsfärg
HallFillColor "#707070"Vilken fyllnadsfärg hallen skall ha
HallFillColorStop0 "#707070"Kan kan få till en gradient på hallens färg. Här anger du den första färgen.
HallFillColorStop1 "#707070"Här anger du den andra gradient-färgen.
StandLineColor "#333"Hexkoden för färgen på monternlinjen
StandHasFillColor trueOm montern ska ha fyllnadsfärg
StandFillColor "#fff"Vilken färg som montern skall ha
StandFillColorStop0 "#cecece"En monter kan ha en gradient mellan två färger. Här anger du startfärgen
StandFillColorStop1 "#cecece"Här anger du färgen för att avsluta gradienten.
Ny StandSelectedFillColorStop0 "#fff"Vald monter, kan ha en gradient mellan två färger. Här anger du startfärgen
Ny StandSelectedFillColorStop1 "#FF0080"Vald monter färgen för att avsluta gradienten.
StandTextVisibility falseOm montrana i hallen ska visa monternamn
Ny StandTextSize 3 Om värdet är 0 så kommer textstorleken att anpassas till monterstorleken
Ny StandReduceTextSizeInPercent 15Om StandTextSize är 0 så kommer värdet 15 här göra att texten slutar 15% ifrån monterns vägg
Ny StandCompanyNameVisibility falseOm monternamnen ska vara synliga eller ej
Ny StandNumberVisibility trueOm monternumren ska vara synliga eller ej
BirdseyeWinStrokeColor "#0000FF"
BirdseyeWinFillColor 'rgba(128, 128, 255, 0.3)'Färg på fönstret innehållande översiktsvyn
BirdseyeBackgroundColor "#B67"Bakgrundsfärgen på översiktsvyn