nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JS 4.11, Bootstrap en Calcite - een oefening

Egge-Jan_Pollé · 2019-04-29T10:27:20+00:00

Calcite Maps bevat CSS-klassen die gebruikt kunnen worden met Bootstrap om snel responsieve kaart-apps te bouwen met een geweldige UI en UX. Na wat proberen en fouten maken is het me gelukt om een eerste kaart-app te maken met die libraries. Je kunt het hier in actie…

Egge-Jan_Pollé

<\/HEAD>

Calcite Maps<\/A> bevat CSS-klassen die gebruikt kunnen worden met Bootstrap<\/A> om snel responsieve kaart-apps te bouwen met een geweldige UI en UX.<\/SPAN><\/P>

<\/P>

Na wat proberen en fouten maken is het me gelukt om een eerste kaart-app te maken met die libraries. <\/SPAN>Je kunt het hier in actie zien:<\/SPAN><\/P>

<\/A><\/P>

<\/P>

Veel programmeerplezier!<\/P>

<\/P>

Egge-Jan<\/P>

<\/P>

<!DOCTYPE html><\/SPAN>\n<<\/SPAN>html<\/SPAN>><\/SPAN><\/SPAN>\n<<\/SPAN>head<\/SPAN>><\/SPAN><\/SPAN>\n  <<\/SPAN>meta<\/SPAN> charset<\/SPAN>=<\/SPAN>"<\/SPAN>utf-8"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>\n  <<\/SPAN>meta<\/SPAN> name<\/SPAN>=<\/SPAN>"<\/Span>viewport"\/ width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\"  class="punctuation token">><\/SPAN><\/SPAN>
<<\/SPAN>span<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>sr-only"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>Schakel dropdownmenu om<\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN><\/<\/PAN>span<\/PAN>><\/PAN><\/PAN>
          <<\/<PAN>span<\/PAN>><\/PAN><\/PAN>
          <<\/<PAN>span<\/PAN>><\/PAN><\/PAN>
          <<\/<PAN>span<\/PAN>><\/PAN><\/PAN>
        <\/div<\/PAN>><\/PAN><\/PAN>
      <\/a<\/PAN>><\/PAN><\/PAN>
      <<\/<UL< PAN>class= "dropdown-menu" role= "menu" >

Over deze kaart

Gemeente West Betuwe

De gemeente West Betuwe bestaat uit 26 kernen

><\/SPAN><\/SPAN>
<<\/SPAN>div<\/SPAN> id<\/SPAN>=<\/SPAN>"<\/SPAN>mapViewDiv"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>
<\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>

<\/SPAN>

<\/SPAN>

<<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>calcite-panels calcite-panels-left calcite-text-dark calcite-bg-light panel-group"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>

<\/SPAN>

<\/<\/PAN>div<\/PAN> class="punctuation token">"https://www.westbetuwe.nl/" target="_blank" title="West Betuwe"><img src="https://www.westbetuwe.nl/sites/all/themes/westbetuwe/logo.svg" alt="West Betuwe" width="132px" height="77px"></a,

// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",

// Calcite Maps
"calcite-maps/calcitemaps-v0.10",

// Calcite Maps ArcGIS Support
"calcite-maps/calcitemaps-arcgis-support-v0.10",

"dojo/domReady!"
], function(WebMap, MapView, Basemap, BasemapGallery, LocalBasemapsSource, Expand, Point, Locator, Home, Zoom, Search, ScaleBar, Attribution, FeatureLayer, LayerList, Bookmarks, Collapse, Dropdown, CalciteMaps, CalciteMapArcGISSupport) {

/******************************************************************
*
* Maak de kaart, view en widgets
*
******************************************************************/

// Basemaps Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD
var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD
var topo_RD_EsriNL = new Basemap({portalItem{id: renderer:<\/SPAN> municipalitiesRenderer, <\/SPAN>\n\t\t title:<\/SPAN> "Gemeente West Betuwe"<\/SPAN>\n\t }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n \/\/ Kaart<\/SPAN>\n\t\tvar<\/SPAN> map =<\/SPAN> new<\/SPAN> WebMap<\/SPAN>(<\/SPAN>{<\/SPAN>\n \t basemap:<\/SPAN> topo_RD_EsriNL, <\/SPAN>\n\t\t bookmarks:<\/SPAN> [<\/SPAN>]<\/SPAN>\n \t}<\/SPAN>)<\/SPAN>;<\/SPAN>\n \n \/\/ Weergave<\/SPAN>\n\t\tvar<\/SPAN> centerPoint =<\/SPAN> new<\/SPAN> Point<\/SPAN>(<\/SPAN>{<\/SPAN>\n\t\t x:<\/SPAN> 141000<\/SPAN>, <\/span>\n\t\t y:<\/span> 431000<\/span>, <\/span>\n\t\t spatialReference:<\/span> 28992<\/span>\n\t\t}<\/span>)<\/span>;<\/span>\n\n var<\/span> mapView =<\/span> new<\/span> MapView<\/span>(<\/span>{<\/span>\n \tspatialReference:<\/span> 28992<\/span>, <\/span>\n container:<\/span> "mapViewDiv"<\/span>, <\/span> \n map:<\/span> map, <\/span> \n \tcenter:<\/span> centerPoint, <\/span> \n \tzoom:<\/span> 7<\/span>, <\/span> \n padding:<\/span> {<\/span> \n top:<\/span> 50<\/span>, <\/span> \n bottom token">"name"<\/SPAN>:<\/SPAN> "Acquoy"<\/SPAN>} <\/SPAN>\n\t\tvar<\/SPAN> asperen =<\/SPAN> {<\/SPAN>"extent"<\/SPAN>:<\/SPAN> {<\/SPAN>"spatialReference"<\/SPAN>:<\/SPAN> {<\/SPAN>"wkid"<\/SPAN>:<\/SPAN> 28992<\/SPAN>}<\/SPAN>,<\/SPAN> "xmax"<\/SPAN>:<\/SPAN> 136622.16178165673<\/SPAN>,<\/SPAN> "xmin"<\/SPAN>:<\/SPAN> 134750.49553832423<\/SPAN>,<\/SPAN> "ymax"<\/SPAN>:<\/SPAN> 432993.0739315419<\/SPAN>,<\/SPAN> "ymin"<\/SPAN>:<\/SPAN> 431977.0718995378<\/SPAN>}<\/SPAN>,<\/SPAN> "name"<\/SPAN>:<\/SPAN> "Asperen"<\/SPAN>}<\/SPAN>\n\t\tvar<\/SPAN> beesd =<\/SPAN> :<\/SPAN> 434355.4041321138<\/SPAN>,<\/SPAN> "ymin"<\/SPAN>:<\/SPAN> 430291.39600409754<\/SPAN>}<\/SPAN>,<\/SPAN> "name"<\/SPAN>:<\/SPAN> "Geldermalsen"<\/SPAN>}<\/SPAN>
var<\/SPAN> gellicum =<\/SPAN> {<\/SPAN>"extent"<\/SPAN>:<\/SPAN> {<\/SPAN>"spatialReference"<\/SPAN>:<\/SPAN> {<\/SPAN>"wkid"<\/SPAN>:<\/SPAN> 28992<\/SPAN>}<\/SPAN>,<\/SPAN> "xmax"<\/SPAN>:<\/SPAN> 139809.74584502002<\/SPAN>,<\/SPAN> "xmin"<\/SPAN>:<\/SPAN> 137938.07960168752<\/SPAN>,<\/SPAN> "ymax"<\/SPAN>:<\/SPAN> 432562.79321577866<\/PAN>,<\/PAN> "ymin"<\/PAN>:<\/PAN> 431546.7911837746<\/PAN>}<\/PAN>,<\/PAN> "name"<\/PAN>:<\/PAN> "Gellicum"<\/PAN>}<\/PAN>
"xmax": 149720.9209097724, "xmin": 145977.5884231074, "ymax": 431895.130998323, "ymin": 429863.12693431485}, "name": "Meteren"}
var neerijnen = {"extent": {"spatialReference": {"wkid": 28992}, "xmax"{"spatialReference": {"wkid": 28992},"xmax": 147787.92126019052, "xmin": 145916.25501685802, "ymax": 434052.5306966994, "ymin": 433036.52866469533}, "name": "Tricht"}
var tuil = {"extent": {"spatialReference": {"wkid": :<\/SPAN> "Bladwijzers"<\/SPAN>,<\/SPAN> \/\/ optioneel, standaardwaarde is "Expand" voor Engelse locale<\/SPAN>
view:<\/SPAN> mapView,<\/SPAN>
content:<\/SPAN> bookmarksWidget.<\/SPAN>domNode,<\/SPAN>
group:<\/SPAN> "top-right"<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

var<\/SPAN> layerList =<\/SPAN> new<\/SPAN> LayerList<\/SPAN>(<\/SPAN>{<\/SPAN>
container:<\/SPAN> document.<\/SPAN>createElement<\/SPAN>(<\/SPAN>"div"<\/SPAN>)<\/SPAN>,<\/SPAN>
view:<\/SPAN> mapView
}<\/SPAN>)<\/SPAN>;<\/SPAN>

layerListExpand =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/Span>{
expandIconClass:<\/span> "esri-icon-layer-list", // zie https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip:<\/span> "Lagen aan- of uitzetten", // optioneel, standaardwaarde is "Expand" voor Engelse locale
view:<\/span> mapView,
content:<\/span> layerList.<\/span>domNode,
group:<\/span> "top-right"
}9;

var home 3d 6e6577 486f6d65: {
view: mapView,
group: "top-right"
} );

var zoom = new Zoom({
view: mapView,
group: "top-right"
});

mapView.ui.add([basemapGalleryExpand, bookmarksWidgetExpand, layerListExpand, home, zoom], "top-right");

var scaleBar = new ScaleBar({
view: mapView,
unit: "metric"
});
mapView.ui.add(scaleBar, "bottom-left");

var attribution = new Attribution({
view: mapView
});
mapView.ui.add(attribution, "manual");

map.layers.addMany([westBetuweLayer]);
});

Vind meer berichten getagd met

Reacties

There are no comments yet

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.