How to use integrated bus map - OsmHackTW/BusRouteMap GitHub Wiki

Integrated HTML Map



  • Clone this project.

  • Setup your Config.js and MainCategory.js files. (See Setup config and category files)

  • Generate route list json file. (AllBusRoutes.json , See Build bus list Json files)

  • Create two folders in your target project folder. (build , LocalData)

  • Copy these files and folders:

    • BusDiv.min.css > build folder
    • BusDivPage.min.js > build folder
    • Config.js > LocalData
    • AllBusRoutes.json > LocalData
    • MainCategory.js > LocalData
    • lib folder
  • Copy the HTML section to <Header> element in your target page.

<link href="build/BusDiv.min.css" rel="stylesheet" />
<link href="" rel="stylesheet" />
<link href="" rel="stylesheet" />
<link href="" rel="stylesheet" />
  • Copy the HTML section to the end of <Body> element in your target page.
<script src=""></script>
<script src=""></script>

<script src=""></script>
<script src=""></script>
<script src="lib/Leaflet.MakiMarkers.js"></script>

<script src="build/CommonVariable.min.js"></script>
<script src="build/BusRender.min.js"></script>
<script src="build/BusDivPage.min.js"></script>

How to Use ?

  • Add the Div element to the section you want to display map.
<div id="map" bus-ref="6,Y9"></div>
  • Name of Div element must be named map.
  • Display route depend on the value of bus-ref , one more bus routes use comma to separate them.
    • (EX. Key bus-ref="Red" , it will render red-line bus on map ; Key bus-ref="Blue,5" , It'll display combo box , make user to choose route.)
  • You can use CSS to control size of map element. (Ex. #map)
⚠️ ** Fallback** ⚠️