Using Kubernetes for TileServer-GL with custom config and style files - docker

How can I add a custom config.json and add a custom style /styles/custom.json to tileserver-gl using Kubernetes? Here is what I have so far for my kubernetes manifest file. Tileserver-gl is up and running fine but I do not see my custom theme that I defined. It does not look like my custom config.json file is being applied. Is using configMap and volumeMounts the right approach?
apiVersion: apps/v1
kind: Deployment
metadata:
name: map-tile-server
namespace: test
labels:
app: map-tile-server
spec:
replicas: 1
selector:
matchLabels:
app: map-tile-server
template:
metadata:
namespace: test
labels:
app: map-tile-server
spec:
containers:
- name: map-tile-server
image: klokantech/tileserver-gl:v2.6.0
ports:
- containerPort: 8080
name: http
volumeMounts:
- name: "map-tile-server-config"
mountPath: "/config.json"
- name: "map-tile-server-style-config"
mountPath: "/styles/custom.json"
resources:
limits:
memory: "256Mi"
cpu: "1"
volumes:
- name: "map-tile-server-config"
configMap:
name: "map-tile-server-config"
- name: "map-tile-server-style-config"
configMap:
name: "map-tile-server-style-config"
---
apiVersion: v1
kind: ConfigMap
data:
config.json: "{ \"options\": { \"paths\": { \"root\": \"\", \"fonts\": \"\", \"styles\": \"styles\", \"mbtiles\": \"data\" }, \"serveStaticMaps\": true, \"formatQuality\": { \"jpeg\": 90, \"webp\": 90 }, \"maxSize\": 8192, \"pbfAlias\": \"pbf\" }, \"styles\": { \"custom\": { \"style\": \"custom.json\", \"tilejson\": { \"bounds\": [-180, -90, 180, 90] } } }, \"data\": { \"v3\": { \"mbtiles\": \"zurich.mbtiles\" } } }"
metadata:
name: map-tile-server-config
namespace: test
---
apiVersion: v1
kind: ConfigMap
data:
custom.json: "{ \"version\": 8, \"name\": \"Custom\", \"metadata\": { \"mapbox:autocomposite\": false, \"mapbox:type\": \"template\", \"maputnik:renderer\": \"mbgljs\", \"openmaptiles:version\": \"3.x\", \"openmaptiles:mapbox:owner\": \"openmaptiles\", \"openmaptiles:mapbox:source:url\": \"mapbox://openmaptiles.4qljc88t\" }, \"sources\": {\"openmaptiles\": {\"type\": \"vector\", \"url\": \"mbtiles://{v3}\"}}, \"sprite\": \"\", \"glyphs\": \"{fontstack}/{range}.pbf\", \"layers\": [ {\"id\": \"background\",\"type\": \"background\",\"layout\": {\"visibility\": \"visible\"},\"paint\": {\"background-color\": \"rgba(49, 52, 56, 1)\"} }, {\"id\": \"landuse-residential\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"landuse\",\"filter\": [ \"all\", [\"==\", \"$type\", \"Polygon\"], [\"in\", \"class\", \"residential\", \"suburb\", \"neighbourhood\"]],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"fill-color\": \"hsl(47, 13%, 86%)\", \"fill-opacity\": 0.7} }, {\"id\": \"landcover_grass\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"landcover\",\"filter\": [\"==\", \"class\", \"grass\"],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"fill-color\": \"hsl(82, 46%, 72%)\", \"fill-opacity\": 0.45} }, {\"id\": \"landcover_wood\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"landcover\",\"filter\": [\"==\", \"class\", \"wood\"],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"fill-color\": \"hsl(82, 46%, 72%)\", \"fill-opacity\": {\"base\": 1, \"stops\": [[8, 0.6], [22, 1]]}} }, {\"id\": \"water\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"water\",\"filter\": [\"all\", [\"==\", \"$type\", \"Polygon\"], [\"!=\", \"intermittent\", 1]],\"layout\": {\"visibility\": \"visible\"},\"paint\": {\"fill-color\": \"rgba(34, 35, 40, 1)\"} }, {\"id\": \"water_intermittent\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"water\",\"filter\": [\"all\", [\"==\", \"$type\", \"Polygon\"], [\"==\", \"intermittent\", 1]],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"fill-color\": \"hsl(205, 56%, 73%)\", \"fill-opacity\": 0.7} }, {\"id\": \"landcover-ice-shelf\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"landcover\",\"filter\": [\"==\", \"subclass\", \"ice_shelf\"],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"fill-color\": \"hsl(47, 26%, 88%)\", \"fill-opacity\": 0.8} }, {\"id\": \"landcover-glacier\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"landcover\",\"filter\": [\"==\", \"subclass\", \"glacier\"],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"fill-color\": \"hsl(47, 22%, 94%)\", \"fill-opacity\": {\"base\": 1, \"stops\": [[0, 1], [8, 0.5]]}} }, {\"id\": \"landcover_sand\",\"type\": \"fill\",\"metadata\": {},\"source\": \"openmaptiles\",\"source-layer\": \"landcover\",\"filter\": [\"all\", [\"in\", \"class\", \"sand\"]],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"fill-antialias\": false, \"fill-color\": \"rgba(232, 214, 38, 1)\", \"fill-opacity\": 0.3} }, {\"id\": \"landuse\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"landuse\",\"filter\": [\"==\", \"class\", \"agriculture\"],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"fill-color\": \"#eae0d0\"} }, {\"id\": \"landuse_overlay_national_park\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"landcover\",\"filter\": [\"==\", \"class\", \"national_park\"],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"fill-color\": \"#E1EBB0\", \"fill-opacity\": {\"base\": 1, \"stops\": [[5, 0], [9, 0.75]]}} }, {\"id\": \"waterway-tunnel\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"waterway\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"tunnel\"]],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(205, 56%, 73%)\", \"line-dasharray\": [3, 3], \"line-gap-width\": {\"stops\": [[12, 0], [20, 6]]}, \"line-opacity\": 1, \"line-width\": {\"base\": 1.4, \"stops\": [[8, 1], [20, 2]]}} }, {\"id\": \"waterway\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"waterway\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"!in\", \"brunnel\", \"tunnel\", \"bridge\"], [\"!=\", \"intermittent\", 1]],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(205, 56%, 73%)\", \"line-opacity\": 1, \"line-width\": {\"base\": 1.4, \"stops\": [[8, 1], [20, 8]]}} }, {\"id\": \"waterway_intermittent\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"waterway\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"!in\", \"brunnel\", \"tunnel\", \"bridge\"], [\"==\", \"intermittent\", 1]],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(205, 56%, 73%)\", \"line-opacity\": 1, \"line-width\": {\"base\": 1.4, \"stops\": [[8, 1], [20, 8]]}, \"line-dasharray\": [2, 1]} }, {\"id\": \"tunnel_railway_transit\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"minzoom\": 0,\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"tunnel\"], [\"==\", \"class\", \"transit\"]],\"layout\": { \"line-cap\": \"butt\", \"line-join\": \"miter\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(34, 12%, 66%)\", \"line-dasharray\": [3, 3], \"line-opacity\": {\"base\": 1, \"stops\": [[11, 0], [16, 1]]}} }, {\"id\": \"building\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"building\",\"layout\": {\"visibility\": \"none\"},\"paint\": { \"fill-antialias\": true, \"fill-color\": \"rgba(222, 211, 190, 1)\", \"fill-opacity\": {\"base\": 1, \"stops\": [[13, 0], [15, 1]]}, \"fill-outline-color\": { \"stops\": [[15, \"rgba(212, 177, 146, 0)\"],[16, \"rgba(212, 177, 146, 0.5)\"] ] }} }, {\"id\": \"housenumber\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"housenumber\",\"minzoom\": 17,\"filter\": [\"==\", \"$type\", \"Point\"],\"layout\": { \"text-field\": \"{housenumber}\", \"text-font\": [\"Noto Sans Regular\"], \"text-size\": 10, \"visibility\": \"none\"},\"paint\": {\"text-color\": \"rgba(212, 177, 146, 1)\"} }, {\"id\": \"road_area_pier\",\"type\": \"fill\",\"metadata\": {},\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [\"all\", [\"==\", \"$type\", \"Polygon\"], [\"==\", \"class\", \"pier\"]],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"fill-color\": \"hsl(47, 26%, 88%)\", \"fill-antialias\": true} }, {\"id\": \"road_pier\",\"type\": \"line\",\"metadata\": {},\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [\"all\", [\"==\", \"$type\", \"LineString\"], [\"in\", \"class\", \"pier\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(47, 26%, 88%)\", \"line-width\": {\"base\": 1.2, \"stops\": [[15, 1], [17, 4]]}} }, {\"id\": \"road_bridge_area\",\"type\": \"fill\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"Polygon\"], [\"in\", \"brunnel\", \"bridge\"]],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"fill-color\": \"hsl(47, 26%, 88%)\", \"fill-opacity\": 0.5} }, {\"id\": \"road_path\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"in\", \"class\", \"path\", \"track\"]],\"layout\": { \"line-cap\": \"square\", \"line-join\": \"bevel\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(0, 0%, 97%)\", \"line-dasharray\": [1, 1], \"line-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 10]]}} }, {\"id\": \"road_minor\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"minzoom\": 13,\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"in\", \"class\", \"minor\", \"service\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(0, 0%, 97%)\", \"line-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 30]]}} }, {\"id\": \"tunnel_minor\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"tunnel\"], [\"==\", \"class\", \"minor_road\"]],\"layout\": { \"line-cap\": \"butt\", \"line-join\": \"miter\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#efefef\", \"line-dasharray\": [0.36, 0.18], \"line-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 30]]}} }, {\"id\": \"tunnel_major\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"tunnel\"], [\"in\", \"class\", \"primary\", \"secondary\", \"tertiary\", \"trunk\"]],\"layout\": { \"line-cap\": \"butt\", \"line-join\": \"miter\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#fff\", \"line-dasharray\": [0.28, 0.14], \"line-width\": {\"base\": 1.4, \"stops\": [[6, 0.5], [20, 30]]}} }, {\"id\": \"aeroway-area\",\"type\": \"fill\",\"metadata\": {\"mapbox:group\": \"1444849345966.4436\"},\"source\": \"openmaptiles\",\"source-layer\": \"aeroway\",\"minzoom\": 4,\"filter\": [ \"all\", [\"==\", \"$type\", \"Polygon\"], [\"in\", \"class\", \"runway\", \"taxiway\"]],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"fill-color\": \"rgba(255, 255, 255, 1)\", \"fill-opacity\": {\"base\": 1, \"stops\": [[13, 0], [14, 1]]}} }, {\"id\": \"aeroway-taxiway\",\"type\": \"line\",\"metadata\": {\"mapbox:group\": \"1444849345966.4436\"},\"source\": \"openmaptiles\",\"source-layer\": \"aeroway\",\"minzoom\": 12,\"filter\": [ \"all\", [\"in\", \"class\", \"taxiway\"], [\"==\", \"$type\", \"LineString\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"rgba(255, 255, 255, 1)\", \"line-opacity\": 1, \"line-width\": {\"base\": 1.5, \"stops\": [[12, 1], [17, 10]]}} }, {\"id\": \"aeroway-runway\",\"type\": \"line\",\"metadata\": {\"mapbox:group\": \"1444849345966.4436\"},\"source\": \"openmaptiles\",\"source-layer\": \"aeroway\",\"minzoom\": 4,\"filter\": [ \"all\", [\"in\", \"class\", \"runway\"], [\"==\", \"$type\", \"LineString\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"rgba(255, 255, 255, 1)\", \"line-opacity\": 1, \"line-width\": {\"base\": 1.5, \"stops\": [[11, 4], [17, 50]]}} }, {\"id\": \"road_trunk_primary\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"in\", \"class\", \"trunk\", \"primary\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#fff\", \"line-width\": {\"base\": 1.4, \"stops\": [[6, 0.5], [20, 30]]}} }, {\"id\": \"road_secondary_tertiary\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"in\", \"class\", \"secondary\", \"tertiary\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#fff\", \"line-width\": {\"base\": 1.4, \"stops\": [[6, 0.5], [20, 20]]}} }, {\"id\": \"road_major_motorway\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"class\", \"motorway\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(0, 0%, 100%)\", \"line-offset\": 0, \"line-width\": {\"base\": 1.4, \"stops\": [[8, 1], [16, 10]]}} }, {\"id\": \"railway-transit\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"class\", \"transit\"], [\"!=\", \"brunnel\", \"tunnel\"]],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(34, 12%, 66%)\", \"line-opacity\": {\"base\": 1, \"stops\": [[11, 0], [16, 1]]}} }, {\"id\": \"railway\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [\"==\", \"class\", \"rail\"],\"layout\": {\"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(34, 12%, 66%)\", \"line-opacity\": {\"base\": 1, \"stops\": [[11, 0], [16, 1]]}} }, {\"id\": \"waterway-bridge-case\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"waterway\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"bridge\"]],\"layout\": { \"line-cap\": \"butt\", \"line-join\": \"miter\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#bbbbbb\", \"line-gap-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 30]]}, \"line-width\": {\"base\": 1.6, \"stops\": [[12, 0.5], [20, 10]]}} }, {\"id\": \"waterway-bridge\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"waterway\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"bridge\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(205, 56%, 73%)\", \"line-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 30]]}} }, {\"id\": \"bridge_minor case\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"bridge\"], [\"==\", \"class\", \"minor_road\"]],\"layout\": { \"line-cap\": \"butt\", \"line-join\": \"miter\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#dedede\", \"line-gap-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 30]]}, \"line-width\": {\"base\": 1.6, \"stops\": [[12, 0.5], [20, 10]]}} }, {\"id\": \"bridge_major case\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"bridge\"], [\"in\", \"class\", \"primary\", \"secondary\", \"tertiary\", \"trunk\"]],\"layout\": { \"line-cap\": \"butt\", \"line-join\": \"miter\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#dedede\", \"line-gap-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 30]]}, \"line-width\": {\"base\": 1.6, \"stops\": [[12, 0.5], [20, 10]]}} }, {\"id\": \"bridge_minor\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"bridge\"], [\"==\", \"class\", \"minor_road\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#efefef\", \"line-width\": {\"base\": 1.55, \"stops\": [[4, 0.25], [20, 30]]}} }, {\"id\": \"bridge_major\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation\",\"filter\": [ \"all\", [\"==\", \"$type\", \"LineString\"], [\"==\", \"brunnel\", \"bridge\"], [\"in\", \"class\", \"primary\", \"secondary\", \"tertiary\", \"trunk\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"#fff\", \"line-width\": {\"base\": 1.4, \"stops\": [[6, 0.5], [20, 30]]}} }, {\"id\": \"admin_sub\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"boundary\",\"filter\": [\"in\", \"admin_level\", 4, 6, 8],\"layout\": {\"visibility\": \"none\"},\"paint\": {\"line-color\": \"hsla(0, 0%, 60%, 0.5)\", \"line-dasharray\": [2, 1]} }, {\"id\": \"admin_country\",\"type\": \"line\",\"source\": \"openmaptiles\",\"source-layer\": \"boundary\",\"filter\": [ \"all\", [\"<=\", \"admin_level\", 2], [\"==\", \"$type\", \"LineString\"]],\"layout\": { \"line-cap\": \"round\", \"line-join\": \"round\", \"visibility\": \"none\"},\"paint\": { \"line-color\": \"hsl(0, 0%, 60%)\", \"line-width\": {\"base\": 1.3, \"stops\": [[3, 0.5], [22, 15]]}} }, {\"id\": \"poi_label\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"poi\",\"minzoom\": 14,\"filter\": [\"all\", [\"==\", \"$type\", \"Point\"], [\"==\", \"rank\", 1]],\"layout\": { \"icon-size\": 1, \"text-anchor\": \"top\", \"text-field\": \"{name:latin}\\n{name:nonlatin}\", \"text-font\": [\"Noto Sans Regular\"], \"text-max-width\": 8, \"text-offset\": [0, 0.5], \"text-size\": 11, \"visibility\": \"none\"},\"paint\": { \"text-color\": \"#666\", \"text-halo-blur\": 1, \"text-halo-color\": \"rgba(255,255,255,0.75)\", \"text-halo-width\": 1} }, {\"id\": \"airport-label\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"aerodrome_label\",\"minzoom\": 10,\"filter\": [\"all\", [\"has\", \"iata\"]],\"layout\": { \"icon-size\": 1, \"text-anchor\": \"top\", \"text-field\": \"{name:latin}\\n{name:nonlatin}\", \"text-font\": [\"Noto Sans Regular\"], \"text-max-width\": 8, \"text-offset\": [0, 0.5], \"text-size\": 11, \"visibility\": \"none\"},\"paint\": { \"text-color\": \"#666\", \"text-halo-blur\": 1, \"text-halo-color\": \"rgba(255,255,255,0.75)\", \"text-halo-width\": 1} }, {\"id\": \"road_major_label\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"transportation_name\",\"filter\": [\"==\", \"$type\", \"LineString\"],\"layout\": { \"symbol-placement\": \"line\", \"text-field\": \"{name:latin} {name:nonlatin}\", \"text-font\": [\"Noto Sans Regular\"], \"text-letter-spacing\": 0.1, \"text-rotation-alignment\": \"map\", \"text-size\": {\"base\": 1.4, \"stops\": [[10, 8], [20, 14]]}, \"text-transform\": \"uppercase\", \"visibility\": \"none\"},\"paint\": { \"text-color\": \"#000\", \"text-halo-color\": \"hsl(0, 0%, 100%)\", \"text-halo-width\": 2} }, {\"id\": \"place_label_other\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"place\",\"minzoom\": 8,\"filter\": [ \"all\", [\"==\", \"$type\", \"Point\"], [\"!in\", \"class\", \"city\", \"state\", \"country\", \"continent\"]],\"layout\": { \"text-anchor\": \"center\", \"text-field\": \"{name:latin}\\n{name:nonlatin}\", \"text-font\": [\"Noto Sans Regular\"], \"text-max-width\": 6, \"text-size\": {\"stops\": [[6, 10], [12, 14]]}, \"visibility\": \"none\"},\"paint\": { \"text-color\": \"hsl(0, 0%, 25%)\", \"text-halo-blur\": 0, \"text-halo-color\": \"hsl(0, 0%, 100%)\", \"text-halo-width\": 2} }, {\"id\": \"place_label_city\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"place\",\"maxzoom\": 16,\"filter\": [\"all\", [\"==\", \"$type\", \"Point\"], [\"==\", \"class\", \"city\"]],\"layout\": { \"text-field\": \"{name:latin}\\n{name:nonlatin}\", \"text-font\": [\"Noto Sans Regular\"], \"text-max-width\": 10, \"text-size\": {\"stops\": [[3, 12], [8, 16]]}, \"visibility\": \"none\"},\"paint\": { \"text-color\": \"hsl(0, 0%, 0%)\", \"text-halo-blur\": 0, \"text-halo-color\": \"hsla(0, 0%, 100%, 0.75)\", \"text-halo-width\": 2} }, {\"id\": \"country_label-other\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"place\",\"maxzoom\": 12,\"filter\": [ \"all\", [\"==\", \"$type\", \"Point\"], [\"==\", \"class\", \"country\"], [\"!has\", \"iso_a2\"]],\"layout\": { \"text-field\": \"{name:latin}\", \"text-font\": [\"Noto Sans Regular\"], \"text-max-width\": 10, \"text-size\": {\"stops\": [[3, 12], [8, 22]]}, \"visibility\": \"none\"},\"paint\": { \"text-color\": \"hsl(0, 0%, 13%)\", \"text-halo-blur\": 0, \"text-halo-color\": \"rgba(255,255,255,0.75)\", \"text-halo-width\": 2} }, {\"id\": \"country_label\",\"type\": \"symbol\",\"source\": \"openmaptiles\",\"source-layer\": \"place\",\"maxzoom\": 12,\"filter\": [ \"all\", [\"==\", \"$type\", \"Point\"], [\"==\", \"class\", \"country\"], [\"has\", \"iso_a2\"]],\"layout\": { \"text-field\": \"{name:latin}\", \"text-font\": [\"Noto Sans Bold\"], \"text-max-width\": 10, \"text-size\": {\"stops\": [[3, 12], [8, 22]]}, \"visibility\": \"none\"},\"paint\": { \"text-color\": \"hsl(0, 0%, 13%)\", \"text-halo-blur\": 0, \"text-halo-color\": \"rgba(255,255,255,0.75)\", \"text-halo-width\": 2} } ], \"id\": \"basic\"}"
metadata:
name: map-tile-server-style-config
namespace: test

I've looked a little deeper into your environment and deployed it on my local cluster, here are my findings:
Look where the files end up being mounted when I deploy your yaml as is in your question:
$ kubectl get pods
NAME READY STATUS RESTARTS AGE
map-tile-server-5c86b677df-wswwz 1/1 Running 0 2s
$ kubectl exec -it map-tile-server-5cb677df-wswwz /bin/bash --
root#map-tile-server-5c86b677df-wswwz:/# ls -l
drwxrwxrwx 3 root root 4096 Apr 10 12:16 config.json
drwxr-xr-x 3 root root 4096 Apr 10 12:16 styles
root#map-tile-server-5c86b677df-wswwz:/config.json# ls -l
lrwxrwxrwx 1 root root 18 Apr 10 12:16 config.json -> ..data/config.json
root#map-tile-server-5c86b677df-wswwz:/styles# ls -l
drwxrwxrwx 3 root root 4096 Apr 10 12:16 custom.json
root#map-tile-server-5c86b677df-wswwz:/styles# cd custom.json/
root#map-tile-server-5c86b677df-wswwz:/styles/custom.json# ls -l
lrwxrwxrwx 1 root root 18 Apr 10 12:16 custom.json -> ..data/custom.json
It is creating folders with the file names and inserting your configmaps inside each one.
In your question you mention you want this files to be placed in /config.json and /styles/custom.json, I'd like to comment two things with you:
You can't set config.json to mount directly in /, the container will not run because you "overwrite" the / folder. So your config.json needs to stay inside some folder, best practice is to mount directly in /data dir.
Although there is a symlink directing the /styles/custom.json/custom.json file to data/custom.json, It is good to warn you that:
if you mention the path /style/custom.json in your config.json it will not find the file there.
Here you can see an example provided in Kubernetes Documentation on How to Mount ConfigMaps as Files
These are the changes I made to your yaml to move the custom.json file to the intended path:
volumeMounts:
- name: map-tile-server-config
mountPath: /config.json
- name: map-tile-server-style-config
mountPath: /styles
volumes:
- name: map-tile-server-config
configMap:
name: map-tile-server-config
- name: map-tile-server-style-config
configMap:
name: map-tile-server-style-config
Now let's test it:
$ kubectl get pods
NAME READY STATUS RESTARTS AGE
map-tile-server-5cd7694b74-s6g6g 1/1 Running 0 8s
$ kubectl exec -it map-tile-server-5cd7694b74-s6g6g -- /bin/bash
root#map-tile-server-5cd7694b74-s6g6g:/# ls
bin boot config.json data dev etc home lib lib64 media mnt opt proc root run sbin srv styles sys tmp usr var
root#map-tile-server-5cd7694b74-s6g6g:/config.json# ls -l
lrwxrwxrwx 1 root root 18 Apr 10 12:27 config.json -> ..data/config.json
root#map-tile-server-5cd7694b74-s6g6g:/styles# ls -l
lrwxrwxrwx 1 root root 18 Apr 10 12:27 custom.json -> ..data/custom.json
Now the files are in the intended location.
My suggestion to easy your management later, would be for example mounting to:
volumeMounts:
- name: map-tile-server-config
mountPath: /data/config
- name: map-tile-server-style-config
mountPath: /data/styles
Would output everything inside data folder:
owilliam#minikube-usc1a:~/CaseFiles/configmap-json$ k exec -it map-tile-server-6b5fc64fd6-6g2wb -- /bin/bash
root#map-tile-server-6b5fc64fd6-6g2wb:/data# ls
config styles zurich_switzerland.mbtiles
root#map-tile-server-6b5fc64fd6-6g2wb:/data# ls -l
total 23684
drwxrwxrwx 3 root root 4096 Apr 10 13:22 config
drwxrwxrwx 3 root root 4096 Apr 10 13:22 styles
-rw-r--r-- 1 root root 24244224 Apr 10 13:22 zurich_switzerland.mbtiles
root#map-tile-server-6b5fc64fd6-6g2wb:/data# ls config
config.json
root#map-tile-server-6b5fc64fd6-6g2wb:/data# ls styles
If you have any question let me know in the comments.

Related

How to get a bone's weight using a json file

I am trying to get the weight for every bone using a gltf json file but i dont know how
here is the json file i am trying to get the weight from:
{
"accessors": [
{
"bufferView": 0,
"componentType": 5126,
"count": 317,
"max": [
10.570027351379395,
15.918471336364746,
6.125584125518799
],
"min": [
-2.611180305480957,
-1.9711413383483887,
-7.055622577667236
],
"type": "VEC3"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 317,
"type": "VEC3"
},
{
"bufferView": 2,
"componentType": 5126,
"count": 317,
"type": "VEC2"
},
{
"bufferView": 3,
"componentType": 5121,
"count": 317,
"type": "VEC4"
},
{
"bufferView": 4,
"componentType": 5126,
"count": 317,
"type": "VEC4"
},
{
"bufferView": 5,
"componentType": 5123,
"count": 768,
"type": "SCALAR"
},
{
"bufferView": 6,
"componentType": 5126,
"count": 5,
"type": "MAT4"
}
],
"asset": {
"generator": "Khronos glTF Blender I/O v1.5.17",
"version": "2.0"
},
"bufferViews": [
{
"buffer": 0,
"byteLength": 3804,
"byteOffset": 0
},
{
"buffer": 0,
"byteLength": 3804,
"byteOffset": 3804
},
{
"buffer": 0,
"byteLength": 2536,
"byteOffset": 7608
},
{
"buffer": 0,
"byteLength": 1268,
"byteOffset": 10144
},
{
"buffer": 0,
"byteLength": 5072,
"byteOffset": 11412
},
{
"buffer": 0,
"byteLength": 1536,
"byteOffset": 16484
},
{
"buffer": 0,
"byteLength": 320,
"byteOffset": 18020
}
],
"buffers": [
{
"byteLength": 18340,
"uri": "manoe.bin"
}
],
"images": [
{
"mimeType": "image/png",
"name": "Material_002_baseColor",
"uri": "Material_002_baseColor.png"
}
],
"materials": [
{
"doubleSided": true,
"name": "Material.001",
"pbrMetallicRoughness": {
"baseColorTexture": {
"index": 0
},
"metallicFactor": 0,
"roughnessFactor": 0.4000000059604645
}
}
],
"meshes": [
{
"name": "Cone.001",
"primitives": [
{
"attributes": {
"JOINTS_0": 3,
"NORMAL": 1,
"POSITION": 0,
"TEXCOORD_0": 2,
"WEIGHTS_0": 4
},
"indices": 5,
"material": 0
}
]
}
],
"nodes": [
{
"name": "Bone.004",
"rotation": [
0.17750653624534607,
-2.8648443617385055e-8,
-0.9102426171302795,
0.37409862875938416
],
"scale": [
1.000000238418579,
1,
1
],
"translation": [
-4.411018750261064e-8,
0.8281745314598083,
1.4894996525072202e-7
]
},
{
"children": [
0
],
"name": "Bone.002",
"rotation": [
0.2184765785932541,
-0.2617807984352112,
-0.7560504078865051,
0.558682918548584
],
"scale": [
1.0000003576278687,
1,
1
],
"translation": [
6.093483762015239e-8,
0.8281747698783875,
-1.283853023892334e-9
]
},
{
"name": "Bone.003",
"rotation": [
-0.4916436970233917,
7.804754176277129e-8,
-0.14189021289348602,
0.8591586947441101
],
"scale": [
1,
1.0000001192092896,
0.9999999403953552
],
"translation": [
-2.4224684125329077e-7,
0.8281750679016113,
-2.68131650216219e-9
]
},
{
"children": [
1,
2
],
"name": "Bone.001",
"rotation": [
-0.11594496667385101,
0.08448944985866547,
-0.5036448836326599,
0.8519155383110046
],
"scale": [
1.000000238418579,
0.9999995827674866,
1
],
"translation": [
-1.357730283757519e-8,
1.0000007152557373,
-3.471412068391244e-14
]
},
{
"children": [
3
],
"name": "Bone",
"rotation": [
2.3709270635663415e-7,
2.8494374859633353e-8,
6.9593789722201e-15,
1
],
"scale": null,
"translation": null
},
{
"mesh": 0,
"name": "Cone.001",
"skin": 0
},
{
"children": [
5,
4
],
"name": "ArmatureBase",
"scale": [
5.400000095367432,
5.400000095367432,
5.400000095367432
]
}
],
"samplers": [
{
"magFilter": 9729,
"minFilter": 9987
}
],
"scene": 0,
"scenes": [
{
"name": "Scene",
"nodes": [
6
]
}
],
"skins": [
{
"inverseBindMatrices": 6,
"joints": [
4,
3,
1,
0,
2
],
"name": "ArmatureBase"
}
],
"textures": [
{
"sampler": 0,
"source": 0
}
]
}
The glTF overview card summarizes it nicely:
Every vertex can be associated with up to 4 joints, each with a given weight.
These are encoded in the components of the JOINTS_0 and WEIGHTS_0 accessors. In your case those are accessors 3 and 4 and bufferviews 3 and 4 with a component type of byte and float, respectively.
One more indirection into the bufferViews component here tells you where in the binary file to look.

How to use multiple buffers in gltf 2.0?

I try to use multiple buffers to include different bin files(one for geometry data, one for animation data) but the animation bin file in buffers1 does not work in Babylonjs [Uncaught TypeError: Cannot read property 'frame' of undefined].
My questions are: Is there something wrong in my gltf file? How to use multiple bin file in gltf?
Below is my complete gltf file:
And the bin files
{
"accessors": [
{
"bufferView": 0,
"componentType": 5126,
"count": 24,
"type": "VEC3",
"max": [
0.3,
0.3,
0.3
],
"min": [
-0.3,
-0.3,
-0.3
],
"name": "Positions Accessor"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 24,
"type": "VEC3",
"name": "Normals Accessor"
},
{
"bufferView": 2,
"componentType": 5126,
"count": 24,
"type": "VEC2",
"name": "UV Accessor 0"
},
{
"bufferView": 3,
"componentType": 5125,
"count": 36,
"type": "SCALAR",
"name": "Indices Accessor"
},
{
"bufferView": 4,
"componentType": 5126,
"count": 3,
"type": "SCALAR",
"max": [
2.0
],
"min": [
0.0
],
"name": "Animation Sampler Input"
},
{
"bufferView": 5,
"componentType": 5126,
"count": 3,
"type": "VEC3",
"name": "Animation Sampler Output"
}
],
"animations": [
{
"channels": [
{
"sampler": 0,
"target": {
"node": 0,
"path": "translation"
}
}
],
"samplers": [
{
"input": 4,
"output": 5
}
]
}
],
"asset": {
"generator": "glTF Asset Generator",
"version": "2.0"
},
"buffers": [
{
"uri": "Test_Geometry.bin",
"byteLength": 912
},
{
"uri": "Test_Animation.bin",
"byteLength": 48
}
],
"bufferViews": [
{
"buffer": 0,
"byteLength": 288,
"name": "Positions"
},
{
"buffer": 0,
"byteOffset": 288,
"byteLength": 288,
"name": "Normals"
},
{
"buffer": 0,
"byteOffset": 576,
"byteLength": 192,
"name": "Texture Coords 0"
},
{
"buffer": 0,
"byteOffset": 768,
"byteLength": 144,
"name": "Indices"
},
{
"buffer": 1,
"byteLength": 12,
"name": "Animation Sampler Input"
},
{
"buffer": 1,
"byteOffset": 12,
"byteLength": 36,
"name": "Animation Sampler Output"
}
],
"images": [
{
"uri": "Test/MultipleBuffers.png"
}
],
"materials": [
{
"pbrMetallicRoughness": {
"baseColorTexture": {
"index": 0
}
}
}
],
"meshes": [
{
"primitives": [
{
"attributes": {
"POSITION": 0,
"NORMAL": 1,
"TEXCOORD_0": 2
},
"indices": 3,
"material": 0
}
]
}
],
"nodes": [
{
"mesh": 0
}
],
"scene": 0,
"scenes": [
{
"nodes": [
0
]
}
],
"textures": [
{
"source": 0
}
]
}

Highchart-graph does not appear in internet explorer

I computed a graph in Highcharts which words perfectly well in any browser but internet explorer (see https://jsfiddle.net/statistik_tg/e69Lp3cv/). I had to add a drill down and drill up as the main chart and the drilled down chart include other metrics. Since then, it hasn't been working in IE.
Does anybody know asolution to let the code run in IE, too? Thanks in advance!
$(document).ready(function() {
var chart = {
type: 'column',
marginBottom: 220,
spacingBottom: 85,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Thurgau': {
name: 'Übrige',
color: '#878787',
data: [
['2009', 106],
['2010', 107],
['2011', 102],
['2012', 102],
['2013', 100],
['2014', 102],
['2015', 107],
['2016', 120],
['2017', 121]
]
}
},
drilldowns2 = {
'Thurgau': {
name: 'Phyisotherapie',
color: '#B5B5B5',
data: [
['2009', 79],
['2010', 83],
['2011', 82],
['2012', 85],
['2013', 89],
['2014', 103],
['2015', 115],
['2016', 128],
['2017', 132]
]
}
},
drilldowns3 = {
'Thurgau': {
name: 'Laboratorien',
color: '#E39E00',
data: [
['2009', 42],
['2010', 43],
['2011', 45],
['2012', 48],
['2013', 55],
['2014', 57],
['2015', 63],
['2016', 69],
['2017', 73]
]
}
},
drilldowns4 = {
'Thurgau': {
name: 'Spitex',
color: '#CD3700',
data: [
['2009', 48],
['2010', 49],
['2011', 53],
['2012', 58],
['2013', 62],
['2014', 68],
['2015', 75],
['2016', 80],
['2017', 83]
]
}
},
drilldowns5 = {
'Thurgau': {
name: 'Pflegeheime',
color: '#8B0000',
data: [
['2009', 192],
['2010', 186],
['2011', 182],
['2012', 182],
['2013', 179],
['2014', 169],
['2015', 171],
['2016', 175],
['2017', 173]
]
}
},
drilldowns6 = {
'Thurgau': {
name: 'Apotheken',
color: '#FFED00',
data: [
['2009', 119],
['2010', 121],
['2011', 126],
['2012', 136],
['2013', 141],
['2014', 145],
['2015', 159],
['2016', 178],
['2017', 188]
]
}
},
drilldowns7 = {
'Thurgau': {
name: 'Ärzte Laboranalysen',
color: '#00B4E8',
data: [
['2009', 52],
['2010', 45],
['2011', 46],
['2012', 47],
['2013', 51],
['2014', 54],
['2015', 58],
['2016', 61],
['2017', 62]
]
}
},
drilldowns8 = {
'Thurgau': {
name: 'Ärzte Medikamente',
color: '#0064e6',
data: [
['2009', 339],
['2010', 331],
['2011', 327],
['2012', 329],
['2013', 335],
['2014', 330],
['2015', 342],
['2016', 361],
['2017', 369]
]
}
},
drilldowns9 = {
'Thurgau': {
name: 'Ärzte Behandlung (ohne Labor)',
color: '#27408B',
data: [
['2009', 477],
['2010', 490],
['2011', 509],
['2012', 521],
['2013', 563],
['2014', 586],
['2015', 632],
['2016', 646],
['2017', 655]
]
}
},
drilldowns10 = {
'Thurgau': {
name: 'Spital ambulant',
color: '#a2c510',
data: [
['2009', 474],
['2010', 481],
['2011', 524],
['2012', 533],
['2013', 579],
['2014', 597],
['2015', 602],
['2016', 658],
['2017', 675]
]
}
},
drilldowns11 = {
'Thurgau': {
name: 'Spital stationär',
color: '#3CA433',
data: [
['2009', 724],
['2010', 733],
['2011', 736],
['2012', 727],
['2013', 874],
['2014', 865],
['2015', 844],
['2016', 833],
['2017', 793]
]
}
},
series = drilldowns[e.point.name],
series2 = drilldowns2[e.point.name];
series3 = drilldowns3[e.point.name];
series4 = drilldowns4[e.point.name];
series5 = drilldowns5[e.point.name];
series6 = drilldowns6[e.point.name];
series7 = drilldowns7[e.point.name];
series8 = drilldowns8[e.point.name];
series9 = drilldowns9[e.point.name];
series10 = drilldowns10[e.point.name];
series11 = drilldowns11[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.addSingleSeriesAsDrilldown(e.point, series4);
chart.addSingleSeriesAsDrilldown(e.point, series5);
chart.addSingleSeriesAsDrilldown(e.point, series6);
chart.addSingleSeriesAsDrilldown(e.point, series7);
chart.addSingleSeriesAsDrilldown(e.point, series8);
chart.addSingleSeriesAsDrilldown(e.point, series9);
chart.addSingleSeriesAsDrilldown(e.point, series10);
chart.addSingleSeriesAsDrilldown(e.point, series11);
chart.applyDrilldown();
chart.yAxis[0].update({
min: 0,
max: 4000
})
}
},
drillup(){
this.yAxis[0].update({
min: 0,
max: 100
})
}
}
};
var plotOptions = {
column: {
stacking: 'normal'
}
};
var title = {
text: "Fast die Hälfte der Kosten im Kanton Thurgau für Spitalbehandlungen",
style: {
fontSize: '18px',
},
align: 'left'
};
var subtitle = {
text: 'Struktur der Bruttokosten nach Kostengruppe, Kanton Thurgau und Schweiz, 2017, Anteile in %/CHF pro versicherte Person¹',
style: {
fontSize: '12px'
},
align: 'left'
};
var yAxis = {
gridLineWidth: 1,
title: '',
lineWidth: 1,
max: 100
};
var xAxis = {
type: 'category'
};
var tooltip = {
valueSuffix: ' CHF'
};
var series = [{
name: 'Übrige',
tooltip: {
valueSuffix: ' %'
},
color: '#878787',
data: [{
name: 'Thurgau',
y: 3.7,
drilldown: true
},{
name: 'Schweiz',
y: 3.5,
drilldown: false
}]
},{
name: 'Physiotherapie',
tooltip: {
valueSuffix: ' %'
},
color: '#B5B5B5',
data: [{
name: 'Thurgau',
y: 4.0,
drilldown: true
},{
name: 'Schweiz',
y: 3.1,
drilldown: false
}]
},{
name: 'Laboratorien',
color: '#E39E00',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.2,
drilldown: true
},{
name: 'Schweiz',
y: 2.8,
drilldown: false
}]
},{
name: 'Spitex',
color: '#CD3700',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.5,
drilldown: true
},{
name: 'Schweiz',
y: 2.7,
drilldown: false
}]
},{
name: 'Pflegeheime',
tooltip: {
valueSuffix: ' %'
},
color: '#8B0000',
data: [{
name: 'Thurgau',
y: 5.2,
drilldown: true
},{
name: 'Schweiz',
y: 5.7,
drilldown: false
}]
},{
name: 'Apotheken',
tooltip: {
valueSuffix: ' %'
},
color: '#FFED00',
data: [{
name: 'Thurgau',
y: 5.7,
drilldown: true
},{
name: 'Schweiz',
y: 11.8,
drilldown: false
}]
},{
name: 'Ärzte Laboranalysen',
tooltip: {
valueSuffix: ' %'
},
color: '#00B4E8',
data: [{
name: 'Thurgau',
y: 1.9,
drilldown: true
},{
name: 'Schweiz',
y: 1.7,
drilldown: false
}]
},{
name: 'Ärzte Medikamente',
tooltip: {
valueSuffix: ' %'
},
color: '#0064e6',
data: [{
name: 'Thurgau',
y: 11.1,
drilldown: true
},{
name: 'Schweiz',
y: 6.3,
drilldown: false
}]
},{
name: 'Ärzte Behandlungen (ohne Labor)',
tooltip: {
valueSuffix: ' %'
},
color: '#27408B',
data: [{
name: 'Thurgau',
y: 19.7,
drilldown: true
},{
name: 'Schweiz',
y: 22.6,
drilldown: false
}]
},{
name: 'Spital ambulant',
tooltip: {
valueSuffix: ' %'
},
color: '#a2c510',
data: [{
name: 'Thurgau',
y: 20.3,
drilldown: true
},{
name: 'Schweiz',
y: 19.1,
drilldown: false
}]
},{
name: 'Spital stationär',
tooltip: {
valueSuffix: ' %'
},
color: '#3CA433',
data: [{
name: 'Thurgau',
y: 23.8,
drilldown: true
},{
name: 'Schweiz',
y: 20.7,
drilldown: false
}]
}];
var drilldown = {
series: []
};
var legend = {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
padding: 25,
symbolPadding: 10,
symbolWidth: 25,
margin: -10,
/*maxHeight: 150,*/
alignColumns: false,
reversed: false,
itemStyle: {
fontWeight: 'normal'
}
};
var credits = {
text: '<b>Hinweis: Für den Vergleich der Kostenanteile im Kanton Thurgau von 2009-2017 klicken Sie <br><b>auf den Balken oder die Balkenbeschriftung zum Thurgau<br>¹ Vergleich Thurgau-Schweiz Anteile in %, Vergleich Thurgau 2009-2017 Anteile in CHF<br>Dienststelle für Statistik Kanton Thurgau <br>Datenquellen: Bundesamt für Gesundheit, Monitoring der Krankenversicherungs-<br>Kostenentwicklung',
href: false,
style: {
color:'#999999',
cursor: false,
fontSize:'10px'
},
position: {
align: 'left',
x: 10,
y: -90
}
};
var exporting = {
allowHTML: true,
enabled: true,
filename:'2019_07_Krankenversicherungskosten_Brutto_2017',
buttons: {
contextButton: {
menuItems: "printChart separator downloadPNG downloadJPEG downloadSVG".split(" ")
}
},
/*csv: {
columnHeaderFormatter: function (item) {
if(item instanceof Highcharts.Axis) {
return 'Quartal';
} else {
if(item instanceof Highcharts.Series) {
return item.name;
}
}
}
}*/
};
var responsive = {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
};
var highchartsOptions = Highcharts.setOptions ({
lang: {
decimalPoint: '.',
thousandsSep: "'",
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
contextButtonTitle: 'Drucken, Download, Export',
downloadJPEG: 'Download JPEG Bild',
downloadPNG: 'Download PNG Bild',
downloadSVG: 'Download SVG Vektor Bild',
downloadXLS: 'Download XLS',
printChart: 'Bild drucken',
viewData: 'Datentabelle ein-/ausblenden',
resetZoom: "Zoom zurücksetzen",
resetZoomTitle: "Zoom zurücksetzen",
drillUpText: "Zurück",
numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
}
});
colors = ["#878787","#B5B5B5","#E39E00","#CD3700","#8B0000","#3CA433","#a2c510","#FFED00","#00B4E8","#0064e6","#27408B"]
var json = {};
json.chart = chart;
json.plotOptions = plotOptions;
json.title = title;
json.subtitle = subtitle;
json.yAxis = yAxis;
json.xAxis = xAxis;
json.tooltip = tooltip;
json.series = series;
json.drilldown = drilldown;
json.legend = legend;
json.credits = credits;
json.exporting = exporting;
json.responsive = responsive;
json.highchartsOptions = highchartsOptions;
json.colors = colors;
$('#2019_07_Krankenversicherungskosten_Brutto_2017').highcharts(json);
});
There is an error in IE developer tools console - you need to change JS line 230 from this:
drillup(){
into this:
drillup: function() {
and then it works fine in IE11

Overlap of data labels in 2 line charts in Highcharts

I am incorporating two line charts in a single charts and using HighCharts . The issue that I am facing is that the data labels of both line charts are getting overlapped . I tried using allowOverlap : true , but of no avail . Can somebody share some example that can help .
http://jsfiddle.net/anandabhishe/ufv13gfe/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line',
},
title: {
text: ' '
},
subtitle: {
text: ' '
},
yAxis : {
//min : 0
//max : 1
//thickInterval: 0
},
xAxis: {
type: 'category',
labels: {
useHTML: true,
style: {
paddingTop: '10px'
},
formatter: function () {
if ('Q1' === this.value) {
return '<div style="font-weight: bold; color: red;">' + this.value + '</div>';
} else {
return '<div style="font-weight: normal;">' + this.value + '</div>';
}
}
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
allowOverlap : true,
useHTML : true,
formatter: function() {
return '<div style="color : white; padding : 5px; border-radius: 5px; background-color : pink; margin : 10px;">' + this.point.linePointLabelValue + '</div>';
}
}
}
},
series: [{
marker: {
symbol: 'circle'
},
"data": [{
"x": 0,
"y": 91800,
"linePointLabelValue": "$91.8K",
"labelFontSize": "14px",
"quarterTitle": "Q1",
"lineColorCode": "red",
"drilldown": "Q1A",
"name": "Q1"
}, {
"x": 1,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q2",
"lineColorCode": "red",
"drilldown": "Q2A",
"name": "Q2"
}, {
"x": 2,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q3",
"lineColorCode": "red",
"drilldown": "Q3A",
"name": "Q3"
}, {
"x": 3,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q4",
"lineColorCode": "red",
"drilldown": "Q4A",
"name": "Q4"
}]
}, {
marker: {
symbol: 'circle'
},
"data": [{
"x": 0,
"y": 92900,
"linePointLabelValue": "$3.4K",
"labelFontSize": "14px",
"quarterTitle": "Q1",
"lineColorCode": "green",
"drilldown": "Q1B",
"name": "Q1"
}, {
"x": 1,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q2",
"lineColorCode": "green",
"drilldown": "Q2B",
"name": "Q2",
"marker": {
"radius": 6
}
}, {
"x": 2,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q3",
"lineColorCode": "green",
"drilldown": "Q3B",
"name": "Q3"
}, {
"x": 3,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q4",
"lineColorCode": "green",
"drilldown": "Q4B",
"name": "Q4"
}]
}],
drilldown: {
activeDataLabelStyle: {
textDecoration: 'none',
},
activeAxisLabelStyle: {
textDecoration: 'none',
},
"series": [{
"id": "Q1A",
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"data": [{
"x": 0,
"y": 12,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 1,
"y": 24,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 2,
"y": 34,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q2A",
"data": [{
"x": 1100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q3A",
"data": [{
"x": 1200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q4A",
"data": [{
"x": 1300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q1B",
"data": [{
"x": 1400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q2B",
"data": [{
"x": 1410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q3B",
"data": [{
"x": 1420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q4B",
"data": [{
"x": 1430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}]
}
});
I suspect that the reason of that unwanted behavior are large (>1000) x axis values of points on drilldown.
In the initial view everything looks good - points have low x values (0, 1, 2 and 3) and categories can be used for them. Highcharts categories mechanism creates labels on x axis starting from 0 and with interval equaled to 1.
So if you suddenly switch to large numbers on x axis Highcharts wants the tickInterval to be preserved. That's cannot happen because the range of values is to wide - ~1500 labels won't fit in.
Highcharts tries to pack as many labels on x axis as possible and finds new value of tickInterval - as small as possible.

Rails - rabl and gon gem return collection of joined tables

This is my first time using the rabl and gon gem. I'm simply attempting to output the results of a query using rabl. Unfortunately, I'm not getting the proper objects back.
My controller:
#test = Category.joins('LEFT OUTER JOIN incomes ON incomes.category_id = categories.id AND incomes.dept_id = 86').group_by { |category| category.cat_ds }
My rabl template:
collection #test
attributes :cat_code, :cat_ds
The result I hope to get:
{
"REVENUE": [
{
"cat_code": 10001,
"cat_ds": "REVENUE",
"id": 1,
"incomes": [
{
"category_id": "1.0",
"chart_id": 1,
"created_at": "2013-01-15T16:43:52Z",
"dept_id": 4,
"feb": "11.0",
"id": 1,
"jan": "12.12",
"note": "Testing",
"updated_at": "2013-01-15T16:43:52Z",
"year_id": 1,
"total_cost": 23
}
]
}
],
"EXPENSE": [
{
"cat_code": 10002,
"cat_ds": "EXPENSE",
"id": 2,
"incomes": [
{
"category_id": "2.0",
"chart_id": 2,
"created_at": "2013-01-15T16:43:52Z",
"dept_id": 86,
"feb": "45.0",
"id": 3,
"jan": "60.0",
"note": "Two",
"updated_at": "2013-01-15T16:43:52Z",
"year_id": 1,
"total_cost": 105
},
{
"category_id": "2.0",
"chart_id": 2,
"created_at": "2013-01-15T16:43:52Z",
"dept_id": 86,
"feb": "45.55",
"id": 5,
"jan": "3454.0",
"note": "One",
"updated_at": "2013-01-15T16:43:52Z",
"year_id": 1,
"total_cost": 3499
}
]
}
]
}
I've removed most of the results above.
The results I'm getting:
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": [
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
},
{
"[#<Category id: 1, cat_code: 10001, cat_ds: \"INPATIENT REVENUE\">]": {}
}
]
}
So for every group like Revenue and Expense its returning one record, the same record. Why would it simply not parse the instance variable I gave it. What else is it doing to the data before presenting it.
Also worth to note, if i skip the rabl template and use the variable from gon, it displays perfectly. So it must be something to do with my rabl template?
Edit
I want to see if the below worked, but I get the following error:
Cannot find rabl template 'income/index' within registered ([]) view paths!
def index
#test_obj = Category.joins('LEFT OUTER JOIN incomes ON incomes.category_id = categories.id AND incomes.dept_id = 86').group_by { |category| category.cat_ds }
#test = Rabl::Renderer.json(#test_obj, 'income/index')
gon.rabl "app/views/incomes/index.rabl", as: "test"
end
Try this in your controller. Rabl is used to render, so if you want to use it to pass to gon I think you have to render it manually since you will render HTML for the request.
#test_obj = Category.joins('LEFT OUTER JOIN incomes ON incomes.category_id = categories.id AND incomes.dept_id = 86').group_by { |category| category.cat_ds }
#test = Rabl::Renderer.json(#test_obj, 'test/show')

Resources