Skip to content

deprecated Getting started with a non bundled project

Jump to bottom
andy.rothwell edited this page Aug 5, 2019 · 1 revision

Back To Home

Note

This was offered as a way to get people to use mapboard without adding a number of installations to their computer.

It is no longer possible to use this method with the latest updates of Mapboard. It can still be used with earlier versions, but it is highly recommended that you follow the Vue Project instructions.

Example

Code for a nonbundled example is available: the nonbundled branch of Atlas.

You can see that code running as a site live here.

Setup

As you can see in the nonbundled branch of Atlas example, a nonbundled project is essentially just a folder containing images (jpgs and things you want on your site), and 3 flat files:

  1. index.html
  2. main.js
  3. styles.css

index.html

To get started, you'll need to add the following tags to your HTML file.

The following snippets are provided for convenience but may not be as up-to-date as the code in the example given above.

CSS

<link rel="stylesheet" href="//unpkg.com/phila-standards@1.0.0/dist/css/phila-app.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<link rel="stylesheet" href="//unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css">
<link rel="stylesheet" href="//unpkg.com/Leaflet.vector-markers@0.0.6/dist/leaflet-vector-markers.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/leaflet-measure-flatfiles/leaflet-measure.css">
<link rel="stylesheet" href="styles.css">

JavaScript

These are best added to the bottom of the HTML file, just before the closing </body> tag.

<!-- JS: Foundation -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>

<!-- JS: Mapboard dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="//unpkg.com/@fortawesome/fontawesome-free@5.4.1/js/fontawesome.js"></script>
<script src="//unpkg.com/@fortawesome/fontawesome-svg-core@1.2.6/index.js"></script>
<script src="//unpkg.com/@fortawesome/free-solid-svg-icons@5.7.2/index.js"></script>
<script src="//unpkg.com/@fortawesome/vue-fontawesome@0.1.1/index.js"></script>
<script>var vueFontAwesome = window['vue-fontawesome'];</script>
<script src="//unpkg.com/lodash@4.17.11/lodash.js"></script>
<script>var debounce = _.debounce;</script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="//unpkg.com/axios@0.16.2/dist/axios.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<script src="//unpkg.com/esri-leaflet@2.2.3"></script>
<script src="//unpkg.com/turf@3.0.14/turf.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="//unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"></script>
<script src="//cityofphiladelphia.github.io/leaflet-vector-icon/dist/leaflet-vector-icon.js"></script>
<script src="//unpkg.com/Leaflet.vector-markers@0.0.6"></script>
<script src="//unpkg.com/leaflet-rotatedmarker@0.2.0"></script>
<script src="//s3.amazonaws.com/leaflet-measure-flatfiles/leaflet-measure.js"></script>

<!-- JS: Cyclomedia (optional) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/4.1.0/ol.js"></script>
<script src="//s3.amazonaws.com/cyclomedia-mapboard/cyclomedia-mapboard.js"></script>

<!-- JS: Pictometry (optional) -->
<script src="//unpkg.com/blueimp-md5@2.10.0/js/md5.min.js"></script>

<!-- JS: Local -->
<script src="//cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>


<!-- Mapboard -->
<script src="//unpkg.com/@cityofphiladelphia/phila-vue-datafetch@0.0.14/dist/phila-vue-datafetch.js"></script>
<script src="//unpkg.com/@cityofphiladelphia/phila-vue-mapping@1.0.19/dist/phila-vue-mapping.js"></script>
<script src="//unpkg.com/@cityofphiladelphia/phila-vue-comps@1.0.21/dist/phila-vue-comps.js"></script>
<script src="//unpkg.com/@cityofphiladelphia/mapboard@3.0.23/dist/mapboard.js"></script>

Versioning

In a bundled project, your Mapboard pulls in the correct versions of phila-vue-comps, phila-vue-mapping, and phila-vue-datafetch automatically. In an unbundled project, where the libraries are incorporated via CDN, you have to use the correct versions which go with your Mapboard version. You can use this table to determine which versions to use:

Mapboard phila-vue-mapping phila-vue-comps phila-vue-datafetch
3.0.23 1.0.19 1.0.21 0.0.14
3.0.22 1.0.19 1.0.20 0.0.13
3.0.21 1.0.17 1.0.19 0.0.13
3.0.20 1.0.17 1.0.18 0.0.13
3.0.19 1.0.15 1.0.17 0.0.13
3.0.18 1.0.13 1.0.15 0.0.13
3.0.17 1.0.12 1.0.15 0.0.13
3.0.16 1.0.11 1.0.14 0.0.12
3.0.15 1.0.11 1.0.12 0.0.12
3.0.14 1.0.8 1.0.11 0.0.12
3.0.13 1.0.7 1.0.9 0.0.11
3.0.12 1.0.7 1.0.9 0.0.11
3.0.11 1.0.7 1.0.9 0.0.11
3.0.10 1.0.7 1.0.9 0.0.11
3.0.9 1.0.7 1.0.9 0.0.11
3.0.8 1.0.7 1.0.9 0.0.11
3.0.7 1.0.6 1.0.8 0.0.11
3.0.6 1.0.5 1.0.6 0.0.10
3.0.5 1.0.5 1.0.5 0.0.10
3.0.4 1.0.5 1.0.4 0.0.10
3.0.2 1.0.2 1.0.3 0.0.9
3.0.1 1.0.1 1.0.2 0.0.9
3.0.0 1.0.0 1.0.0 0.0.9
2.0.24 0.0.8 0.0.9 0.0.8
2.0.23 0.0.8 0.0.7 0.0.7
2.0.22 0.0.7 0.0.6 0.0.6
2.0.21 0.0.6 0.0.4 0.0.4
2.0.20 0.0.6 0.0.4 0.0.4
2.0.19 0.0.5 0.0.3 0.0.3
2.0.18 0.0.5 0.0.2 0.0.3
2.0.17 0.0.5 0.0.2 0.0.2
2.0.16 0.0.5 0.0.2
2.0.15 0.0.5 0.0.2

Mapboard container

Before we start configuring a Mapboard, we'll need an empty DOM element for it to mount to. Add a tag like this wherever you'd like your Mapboard to appear:

<div id="mapboard"></div>

You can use a different id and specify it in the config. See below for details.

main.js

Initialization

Now that we've added the Mapboard JavaScript library to our HTML, we have access to the Mapboard global variable which allows us to create and configure the Mapboard itself. The basic pattern is:

mapboard.default({
  // config options will go here
});

You can add that to your existing JavaScript, or create a new file (e.g. mapboard.js) and reference it in your HTML. Note that Mapboard won't initialize without some required options, so if you run that code you might get a few errors at this point.

styles.css

.greeting > h2 {
  margin-bottom: 30px;
}

.greeting > .callout {
  border-color: #58c04d;
  background: #fff;
  /*margin: 0 0 1rem 0;*/
  padding: 1rem;
}

.greeting > .callout > ul {
  margin: 0 0 0 1.42857rem;
  padding: 0 0 0 1.42857rem;
}

#application .site-header, #application .app-footer {
	background: #2176d2;
}

#application .site-header .page-title-container h1 {
	font-size: 2.14286rem;
}

/*this fixes an issue with the topic panel scrolling over the footer padding*/
#application .app-footer {
	position: relative;
}

/*small*/
@media screen and (max-width: 39.9375em) {
	.logo {
		float: left;
	}

	.page-title-container {
		float: right;
	}
}
Clone this wiki locally